@syncfusion/ej2-image-editor 22.2.11 → 23.1.38

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 (119) hide show
  1. package/CHANGELOG.md +19 -0
  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 +4446 -678
  5. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-image-editor.es5.js +4409 -632
  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 +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.d.ts +1 -0
  20. package/src/image-editor/action/freehand-draw.js +92 -56
  21. package/src/image-editor/action/selection.d.ts +6 -0
  22. package/src/image-editor/action/selection.js +417 -68
  23. package/src/image-editor/action/shape.d.ts +8 -0
  24. package/src/image-editor/action/shape.js +303 -91
  25. package/src/image-editor/action/transform.d.ts +9 -0
  26. package/src/image-editor/action/transform.js +402 -52
  27. package/src/image-editor/action/undo-redo.d.ts +1 -0
  28. package/src/image-editor/action/undo-redo.js +138 -10
  29. package/src/image-editor/base/enum.d.ts +38 -1
  30. package/src/image-editor/base/enum.js +39 -0
  31. package/src/image-editor/base/image-editor-model.d.ts +16 -2
  32. package/src/image-editor/base/image-editor.d.ts +142 -7
  33. package/src/image-editor/base/image-editor.js +719 -70
  34. package/src/image-editor/base/interface.d.ts +233 -2
  35. package/src/image-editor/renderer/toolbar.d.ts +25 -0
  36. package/src/image-editor/renderer/toolbar.js +1274 -72
  37. package/styles/bootstrap-dark.css +73 -1
  38. package/styles/bootstrap.css +73 -1
  39. package/styles/bootstrap4.css +73 -1
  40. package/styles/bootstrap5-dark.css +73 -1
  41. package/styles/bootstrap5.css +73 -1
  42. package/styles/fabric-dark.css +73 -1
  43. package/styles/fabric.css +73 -1
  44. package/styles/fluent-dark.css +73 -1
  45. package/styles/fluent.css +73 -1
  46. package/styles/highcontrast-light.css +75 -3
  47. package/styles/highcontrast.css +74 -7
  48. package/styles/image-editor/_bootstrap-dark-definition.scss +1 -0
  49. package/styles/image-editor/_bootstrap-definition.scss +1 -0
  50. package/styles/image-editor/_bootstrap4-definition.scss +1 -0
  51. package/styles/image-editor/_bootstrap5-definition.scss +1 -0
  52. package/styles/image-editor/_fabric-dark-definition.scss +1 -0
  53. package/styles/image-editor/_fabric-definition.scss +1 -0
  54. package/styles/image-editor/_fluent-definition.scss +1 -0
  55. package/styles/image-editor/_fusionnew-definition.scss +1 -0
  56. package/styles/image-editor/_highcontrast-definition.scss +2 -1
  57. package/styles/image-editor/_highcontrast-light-definition.scss +2 -1
  58. package/styles/image-editor/_layout.scss +98 -0
  59. package/styles/image-editor/_material-dark-definition.scss +1 -0
  60. package/styles/image-editor/_material-definition.scss +1 -0
  61. package/styles/image-editor/_material3-definition.scss +2 -1
  62. package/styles/image-editor/_tailwind-definition.scss +1 -0
  63. package/styles/image-editor/_theme.scss +4 -2
  64. package/styles/image-editor/bootstrap-dark.css +73 -1
  65. package/styles/image-editor/bootstrap-dark.scss +1 -1
  66. package/styles/image-editor/bootstrap.css +73 -1
  67. package/styles/image-editor/bootstrap.scss +1 -1
  68. package/styles/image-editor/bootstrap4.css +73 -1
  69. package/styles/image-editor/bootstrap4.scss +1 -1
  70. package/styles/image-editor/bootstrap5-dark.css +73 -1
  71. package/styles/image-editor/bootstrap5-dark.scss +1 -1
  72. package/styles/image-editor/bootstrap5.css +73 -1
  73. package/styles/image-editor/bootstrap5.scss +1 -1
  74. package/styles/image-editor/fabric-dark.css +73 -1
  75. package/styles/image-editor/fabric-dark.scss +1 -1
  76. package/styles/image-editor/fabric.css +73 -1
  77. package/styles/image-editor/fabric.scss +1 -1
  78. package/styles/image-editor/fluent-dark.css +73 -1
  79. package/styles/image-editor/fluent-dark.scss +1 -1
  80. package/styles/image-editor/fluent.css +73 -1
  81. package/styles/image-editor/fluent.scss +1 -1
  82. package/styles/image-editor/highcontrast-light.css +75 -3
  83. package/styles/image-editor/highcontrast-light.scss +1 -1
  84. package/styles/image-editor/highcontrast.css +74 -7
  85. package/styles/image-editor/highcontrast.scss +1 -1
  86. package/styles/image-editor/icons/_bootstrap-dark.scss +1 -0
  87. package/styles/image-editor/icons/_bootstrap.scss +1 -0
  88. package/styles/image-editor/icons/_bootstrap4.scss +1 -0
  89. package/styles/image-editor/icons/_bootstrap5.scss +1 -0
  90. package/styles/image-editor/icons/_fabric-dark.scss +1 -0
  91. package/styles/image-editor/icons/_fabric.scss +1 -0
  92. package/styles/image-editor/icons/_fluent.scss +1 -0
  93. package/styles/image-editor/icons/_fusionnew.scss +1 -0
  94. package/styles/image-editor/icons/_highcontrast-light.scss +1 -0
  95. package/styles/image-editor/icons/_highcontrast.scss +1 -0
  96. package/styles/image-editor/icons/_material-dark.scss +1 -0
  97. package/styles/image-editor/icons/_material.scss +1 -0
  98. package/styles/image-editor/icons/_material3.scss +1 -0
  99. package/styles/image-editor/icons/_tailwind.scss +1 -0
  100. package/styles/image-editor/material-dark.css +73 -2
  101. package/styles/image-editor/material-dark.scss +1 -1
  102. package/styles/image-editor/material.css +73 -2
  103. package/styles/image-editor/material.scss +1 -1
  104. package/styles/image-editor/material3-dark.css +78 -4
  105. package/styles/image-editor/material3-dark.scss +1 -1
  106. package/styles/image-editor/material3.css +78 -4
  107. package/styles/image-editor/material3.scss +1 -1
  108. package/styles/image-editor/tailwind-dark.css +73 -2
  109. package/styles/image-editor/tailwind-dark.scss +1 -1
  110. package/styles/image-editor/tailwind.css +73 -2
  111. package/styles/image-editor/tailwind.scss +1 -1
  112. package/styles/material-dark.css +73 -2
  113. package/styles/material.css +73 -2
  114. package/styles/material3-dark.css +78 -4
  115. package/styles/material3-dark.scss +1 -1
  116. package/styles/material3.css +78 -4
  117. package/styles/material3.scss +1 -1
  118. package/styles/tailwind-dark.css +73 -2
  119. package/styles/tailwind.css +73 -2
package/styles/material3-dark.css CHANGED
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
2
1
  :root {
3
2
  --color-sf-black: 0, 0, 0;
4
3
  --color-sf-white: 255, 255, 255;
@@ -121,7 +120,7 @@
121
120
  .e-image-editor .e-text-font-color.e-template .e-caret::before {
122
121
  content: "\e76f";
123
122
  }
124
- .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
123
+ .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 {
125
124
  content: "\e739";
126
125
  }
127
126
  .e-image-editor .e-fill.e-template .e-caret::before {
@@ -270,6 +269,14 @@
270
269
  height: 56px !important; /* stylelint-disable-line declaration-no-important */
271
270
  min-height: 56px !important; /* stylelint-disable-line declaration-no-important */
272
271
  }
272
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span,
273
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span {
274
+ font-size: 16px;
275
+ }
276
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span,
277
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span {
278
+ font-size: 16px;
279
+ }
273
280
  .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,
274
281
  .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 {
275
282
  font-size: 18px;
@@ -320,9 +327,52 @@
320
327
  position: relative;
321
328
  display: block;
322
329
  }
330
+ .e-image-editor .e-quick-access-toolbar-area .e-toolbar {
331
+ border-radius: 4px;
332
+ }
333
+ .e-image-editor .e-ie-drop-area {
334
+ height: calc(100% - 18px);
335
+ width: calc(100% - 20px);
336
+ border: 2px dashed rgba(var(--color-sf-on-surface-variant));
337
+ border-radius: 10px;
338
+ margin: 10px;
339
+ }
340
+ .e-image-editor .e-ie-drop-area .e-upload {
341
+ display: none;
342
+ }
343
+ .e-image-editor .e-ie-drop-area .e-image::before {
344
+ font-size: 50px;
345
+ }
346
+ .e-image-editor .e-ie-drop-area .e-ie-drop-icon {
347
+ top: calc(50% - 60px);
348
+ left: calc(50% - 25px);
349
+ }
350
+ .e-image-editor .e-ie-drop-area .e-ie-drop-content {
351
+ top: 50%;
352
+ left: calc(50% - 160px);
353
+ font-size: 14px;
354
+ }
355
+ .e-image-editor .e-ie-drop-area .e-ie-drop-info {
356
+ top: calc(50% + 40px);
357
+ left: calc(50% - 100px);
358
+ position: absolute;
359
+ font-size: 14px;
360
+ }
361
+ .e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
362
+ left: calc(50% - 120px);
363
+ top: 50%;
364
+ font-size: 14px;
365
+ }
323
366
  .e-image-editor .e-toolbar {
324
367
  border: none;
325
368
  }
369
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
370
+ margin-left: 20px;
371
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
372
+ }
373
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width {
374
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
375
+ }
326
376
  .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
327
377
  font-size: 16px;
328
378
  }
@@ -383,6 +433,30 @@
383
433
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
384
434
  height: 140px !important; /* stylelint-disable-line declaration-no-important */
385
435
  }
436
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
437
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
438
+ }
439
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item {
440
+ display: -ms-inline-grid;
441
+ display: inline-grid;
442
+ }
443
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item > span {
444
+ font-weight: 500;
445
+ margin: 4px;
446
+ text-align: center;
447
+ }
448
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
449
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
450
+ }
451
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item:not(.e-hidden) {
452
+ display: -ms-inline-grid;
453
+ display: inline-grid;
454
+ }
455
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item > span {
456
+ font-weight: 500;
457
+ margin: 4px;
458
+ text-align: center;
459
+ }
386
460
  .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
387
461
  display: none;
388
462
  }
@@ -416,7 +490,7 @@
416
490
  color: rgba(var(--color-sf-on-surface-variant));
417
491
  }
418
492
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn {
419
- background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface)) !important; /* stylelint-disable-line declaration-no-important */
493
+ 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 */
420
494
  }
421
495
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn {
422
496
  background: inherit;
@@ -461,5 +535,5 @@
461
535
  }
462
536
 
463
537
  .e-dropdown-popup .e-selected-btn {
464
- background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface)) !important; /* stylelint-disable-line declaration-no-important */
538
+ 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 */
465
539
  }
package/styles/material3-dark.scss CHANGED
@@ -1,3 +1,3 @@
1
1
 
2
- @import 'ej2-base/styles/material3-dark-definition.scss';
2
+
3
3
  @import 'image-editor/material3-dark.scss';
package/styles/material3.css CHANGED
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
2
1
  :root {
3
2
  --color-sf-black: 0, 0, 0;
4
3
  --color-sf-white: 255, 255, 255;
@@ -177,7 +176,7 @@
177
176
  .e-image-editor .e-text-font-color.e-template .e-caret::before {
178
177
  content: "\e76f";
179
178
  }
180
- .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
179
+ .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 {
181
180
  content: "\e739";
182
181
  }
183
182
  .e-image-editor .e-fill.e-template .e-caret::before {
@@ -326,6 +325,14 @@
326
325
  height: 56px !important; /* stylelint-disable-line declaration-no-important */
327
326
  min-height: 56px !important; /* stylelint-disable-line declaration-no-important */
328
327
  }
328
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span,
329
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span {
330
+ font-size: 16px;
331
+ }
332
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span,
333
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span {
334
+ font-size: 16px;
335
+ }
329
336
  .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,
330
337
  .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 {
331
338
  font-size: 18px;
@@ -376,9 +383,52 @@
376
383
  position: relative;
377
384
  display: block;
378
385
  }
386
+ .e-image-editor .e-quick-access-toolbar-area .e-toolbar {
387
+ border-radius: 4px;
388
+ }
389
+ .e-image-editor .e-ie-drop-area {
390
+ height: calc(100% - 18px);
391
+ width: calc(100% - 20px);
392
+ border: 2px dashed rgba(var(--color-sf-on-surface-variant));
393
+ border-radius: 10px;
394
+ margin: 10px;
395
+ }
396
+ .e-image-editor .e-ie-drop-area .e-upload {
397
+ display: none;
398
+ }
399
+ .e-image-editor .e-ie-drop-area .e-image::before {
400
+ font-size: 50px;
401
+ }
402
+ .e-image-editor .e-ie-drop-area .e-ie-drop-icon {
403
+ top: calc(50% - 60px);
404
+ left: calc(50% - 25px);
405
+ }
406
+ .e-image-editor .e-ie-drop-area .e-ie-drop-content {
407
+ top: 50%;
408
+ left: calc(50% - 160px);
409
+ font-size: 14px;
410
+ }
411
+ .e-image-editor .e-ie-drop-area .e-ie-drop-info {
412
+ top: calc(50% + 40px);
413
+ left: calc(50% - 100px);
414
+ position: absolute;
415
+ font-size: 14px;
416
+ }
417
+ .e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
418
+ left: calc(50% - 120px);
419
+ top: 50%;
420
+ font-size: 14px;
421
+ }
379
422
  .e-image-editor .e-toolbar {
380
423
  border: none;
381
424
  }
425
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
426
+ margin-left: 20px;
427
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
428
+ }
429
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width {
430
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
431
+ }
382
432
  .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
383
433
  font-size: 16px;
384
434
  }
@@ -439,6 +489,30 @@
439
489
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
440
490
  height: 140px !important; /* stylelint-disable-line declaration-no-important */
441
491
  }
492
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
493
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
494
+ }
495
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item {
496
+ display: -ms-inline-grid;
497
+ display: inline-grid;
498
+ }
499
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item > span {
500
+ font-weight: 500;
501
+ margin: 4px;
502
+ text-align: center;
503
+ }
504
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
505
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
506
+ }
507
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item:not(.e-hidden) {
508
+ display: -ms-inline-grid;
509
+ display: inline-grid;
510
+ }
511
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item > span {
512
+ font-weight: 500;
513
+ margin: 4px;
514
+ text-align: center;
515
+ }
442
516
  .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
443
517
  display: none;
444
518
  }
@@ -472,7 +546,7 @@
472
546
  color: rgba(var(--color-sf-on-surface-variant));
473
547
  }
474
548
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn {
475
- background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface)) !important; /* stylelint-disable-line declaration-no-important */
549
+ 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 */
476
550
  }
477
551
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn {
478
552
  background: inherit;
@@ -517,5 +591,5 @@
517
591
  }
518
592
 
519
593
  .e-dropdown-popup .e-selected-btn {
520
- background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface)) !important; /* stylelint-disable-line declaration-no-important */
594
+ 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 */
521
595
  }
package/styles/material3.scss CHANGED
@@ -1,3 +1,3 @@
1
1
 
2
- @import 'ej2-base/styles/material3-definition.scss';
2
+
3
3
  @import 'image-editor/material3.scss';
package/styles/tailwind-dark.css CHANGED
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
1
  /* stylelint-disable-line no-empty-source */
3
2
  .e-upload .e-upload-actions,
4
3
  .e-bigger.e-small .e-upload .e-upload-actions {
@@ -65,7 +64,7 @@
65
64
  .e-image-editor .e-text-font-color.e-template .e-caret::before {
66
65
  content: "\e76f";
67
66
  }
68
- .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
67
+ .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 {
69
68
  content: "\e739";
70
69
  }
71
70
  .e-image-editor .e-fill.e-template .e-caret::before {
@@ -214,6 +213,14 @@
214
213
  height: 48px !important; /* stylelint-disable-line declaration-no-important */
215
214
  min-height: 48px !important; /* stylelint-disable-line declaration-no-important */
216
215
  }
216
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span,
217
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span {
218
+ font-size: 16px;
219
+ }
220
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span,
221
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span {
222
+ font-size: 16px;
223
+ }
217
224
  .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,
218
225
  .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 {
219
226
  font-size: 20px;
@@ -264,11 +271,51 @@
264
271
  position: relative;
265
272
  display: block;
266
273
  }
274
+ .e-image-editor .e-ie-drop-area {
275
+ height: calc(100% - 18px);
276
+ width: calc(100% - 20px);
277
+ border: 2px dashed #d1d5db;
278
+ border-radius: 10px;
279
+ margin: 10px;
280
+ }
281
+ .e-image-editor .e-ie-drop-area .e-upload {
282
+ display: none;
283
+ }
284
+ .e-image-editor .e-ie-drop-area .e-image::before {
285
+ font-size: 50px;
286
+ }
287
+ .e-image-editor .e-ie-drop-area .e-ie-drop-icon {
288
+ top: calc(50% - 60px);
289
+ left: calc(50% - 25px);
290
+ }
291
+ .e-image-editor .e-ie-drop-area .e-ie-drop-content {
292
+ top: 50%;
293
+ left: calc(50% - 160px);
294
+ font-size: 14px;
295
+ }
296
+ .e-image-editor .e-ie-drop-area .e-ie-drop-info {
297
+ top: calc(50% + 40px);
298
+ left: calc(50% - 100px);
299
+ position: absolute;
300
+ font-size: 14px;
301
+ }
302
+ .e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
303
+ left: calc(50% - 120px);
304
+ top: 50%;
305
+ font-size: 14px;
306
+ }
267
307
  .e-image-editor .e-toolbar {
268
308
  border: none;
269
309
  height: 38px !important; /* stylelint-disable-line declaration-no-important */
270
310
  min-height: 38px !important; /* stylelint-disable-line declaration-no-important */
271
311
  }
312
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
313
+ margin-left: 20px;
314
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
315
+ }
316
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width {
317
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
318
+ }
272
319
  .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
273
320
  font-size: 18px;
274
321
  }
@@ -329,6 +376,30 @@
329
376
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
330
377
  height: 130px !important; /* stylelint-disable-line declaration-no-important */
331
378
  }
379
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
380
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
381
+ }
382
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item {
383
+ display: -ms-inline-grid;
384
+ display: inline-grid;
385
+ }
386
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item > span {
387
+ font-weight: 500;
388
+ margin: 4px;
389
+ text-align: center;
390
+ }
391
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
392
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
393
+ }
394
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item:not(.e-hidden) {
395
+ display: -ms-inline-grid;
396
+ display: inline-grid;
397
+ }
398
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item > span {
399
+ font-weight: 500;
400
+ margin: 4px;
401
+ text-align: center;
402
+ }
332
403
  .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
333
404
  display: none;
334
405
  }
package/styles/tailwind.css CHANGED
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
1
  /* stylelint-disable-line no-empty-source */
3
2
  .e-upload .e-upload-actions,
4
3
  .e-bigger.e-small .e-upload .e-upload-actions {
@@ -65,7 +64,7 @@
65
64
  .e-image-editor .e-text-font-color.e-template .e-caret::before {
66
65
  content: "\e76f";
67
66
  }
68
- .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
67
+ .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 {
69
68
  content: "\e739";
70
69
  }
71
70
  .e-image-editor .e-fill.e-template .e-caret::before {
@@ -214,6 +213,14 @@
214
213
  height: 48px !important; /* stylelint-disable-line declaration-no-important */
215
214
  min-height: 48px !important; /* stylelint-disable-line declaration-no-important */
216
215
  }
216
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span,
217
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span {
218
+ font-size: 16px;
219
+ }
220
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span,
221
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span {
222
+ font-size: 16px;
223
+ }
217
224
  .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,
218
225
  .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 {
219
226
  font-size: 20px;
@@ -264,11 +271,51 @@
264
271
  position: relative;
265
272
  display: block;
266
273
  }
274
+ .e-image-editor .e-ie-drop-area {
275
+ height: calc(100% - 18px);
276
+ width: calc(100% - 20px);
277
+ border: 2px dashed #6b7280;
278
+ border-radius: 10px;
279
+ margin: 10px;
280
+ }
281
+ .e-image-editor .e-ie-drop-area .e-upload {
282
+ display: none;
283
+ }
284
+ .e-image-editor .e-ie-drop-area .e-image::before {
285
+ font-size: 50px;
286
+ }
287
+ .e-image-editor .e-ie-drop-area .e-ie-drop-icon {
288
+ top: calc(50% - 60px);
289
+ left: calc(50% - 25px);
290
+ }
291
+ .e-image-editor .e-ie-drop-area .e-ie-drop-content {
292
+ top: 50%;
293
+ left: calc(50% - 160px);
294
+ font-size: 14px;
295
+ }
296
+ .e-image-editor .e-ie-drop-area .e-ie-drop-info {
297
+ top: calc(50% + 40px);
298
+ left: calc(50% - 100px);
299
+ position: absolute;
300
+ font-size: 14px;
301
+ }
302
+ .e-image-editor .e-ie-drop-area .e-ie-min-drop-content {
303
+ left: calc(50% - 120px);
304
+ top: 50%;
305
+ font-size: 14px;
306
+ }
267
307
  .e-image-editor .e-toolbar {
268
308
  border: none;
269
309
  height: 38px !important; /* stylelint-disable-line declaration-no-important */
270
310
  min-height: 38px !important; /* stylelint-disable-line declaration-no-important */
271
311
  }
312
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
313
+ margin-left: 20px;
314
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
315
+ }
316
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width {
317
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
318
+ }
272
319
  .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
273
320
  font-size: 18px;
274
321
  }
@@ -329,6 +376,30 @@
329
376
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
330
377
  height: 130px !important; /* stylelint-disable-line declaration-no-important */
331
378
  }
379
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
380
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
381
+ }
382
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item {
383
+ display: -ms-inline-grid;
384
+ display: inline-grid;
385
+ }
386
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item > span {
387
+ font-weight: 500;
388
+ margin: 4px;
389
+ text-align: center;
390
+ }
391
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
392
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
393
+ }
394
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item:not(.e-hidden) {
395
+ display: -ms-inline-grid;
396
+ display: inline-grid;
397
+ }
398
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item > span {
399
+ font-weight: 500;
400
+ margin: 4px;
401
+ text-align: center;
402
+ }
332
403
  .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
333
404
  display: none;
334
405
  }