@syncfusion/ej2-image-editor 23.2.7 → 24.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.
- package/CHANGELOG.md +3 -59
- package/dist/ej2-image-editor.umd.min.js +2 -2
- package/dist/ej2-image-editor.umd.min.js.map +1 -1
- package/dist/es6/ej2-image-editor.es2015.js +7146 -4325
- package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
- package/dist/es6/ej2-image-editor.es5.js +7215 -4381
- package/dist/es6/ej2-image-editor.es5.js.map +1 -1
- package/dist/global/ej2-image-editor.min.js +2 -2
- package/dist/global/ej2-image-editor.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +12 -12
- package/src/image-editor/action/crop.d.ts +6 -0
- package/src/image-editor/action/crop.js +347 -188
- package/src/image-editor/action/draw.d.ts +35 -2
- package/src/image-editor/action/draw.js +1682 -881
- package/src/image-editor/action/export.js +90 -29
- package/src/image-editor/action/filter.d.ts +3 -1
- package/src/image-editor/action/filter.js +74 -94
- package/src/image-editor/action/freehand-draw.d.ts +4 -0
- package/src/image-editor/action/freehand-draw.js +248 -147
- package/src/image-editor/action/selection.d.ts +6 -1
- package/src/image-editor/action/selection.js +1133 -1091
- package/src/image-editor/action/shape.d.ts +7 -0
- package/src/image-editor/action/shape.js +921 -550
- package/src/image-editor/action/transform.d.ts +2 -0
- package/src/image-editor/action/transform.js +514 -346
- package/src/image-editor/action/undo-redo.d.ts +2 -0
- package/src/image-editor/action/undo-redo.js +137 -36
- package/src/image-editor/base/enum.d.ts +2 -1
- package/src/image-editor/base/enum.js +1 -0
- package/src/image-editor/base/image-editor-model.d.ts +37 -2
- package/src/image-editor/base/image-editor.d.ts +124 -3
- package/src/image-editor/base/image-editor.js +672 -171
- package/src/image-editor/base/interface.d.ts +69 -15
- package/src/image-editor/renderer/toolbar.d.ts +10 -0
- package/src/image-editor/renderer/toolbar.js +1371 -822
- package/styles/bootstrap-dark.css +113 -8
- package/styles/bootstrap.css +112 -7
- package/styles/bootstrap4.css +113 -8
- package/styles/bootstrap5-dark.css +113 -8
- package/styles/bootstrap5.css +113 -8
- package/styles/fabric-dark.css +114 -9
- package/styles/fabric.css +113 -8
- package/styles/fluent-dark.css +118 -9
- package/styles/fluent.css +118 -9
- package/styles/highcontrast-light.css +112 -7
- package/styles/highcontrast.css +116 -7
- package/styles/image-editor/_bootstrap-dark-definition.scss +3 -0
- package/styles/image-editor/_bootstrap-definition.scss +3 -0
- package/styles/image-editor/_bootstrap4-definition.scss +3 -0
- package/styles/image-editor/_bootstrap5-definition.scss +3 -0
- package/styles/image-editor/_fabric-dark-definition.scss +3 -0
- package/styles/image-editor/_fabric-definition.scss +3 -0
- package/styles/image-editor/_fluent-definition.scss +3 -0
- package/styles/image-editor/_fusionnew-definition.scss +3 -0
- package/styles/image-editor/_highcontrast-definition.scss +3 -0
- package/styles/image-editor/_highcontrast-light-definition.scss +3 -0
- package/styles/image-editor/_layout.scss +138 -4
- package/styles/image-editor/_material-dark-definition.scss +3 -0
- package/styles/image-editor/_material-definition.scss +3 -0
- package/styles/image-editor/_material3-definition.scss +3 -0
- package/styles/image-editor/_tailwind-definition.scss +3 -0
- package/styles/image-editor/_theme.scss +2 -4
- package/styles/image-editor/bootstrap-dark.css +113 -8
- package/styles/image-editor/bootstrap.css +112 -7
- package/styles/image-editor/bootstrap4.css +113 -8
- package/styles/image-editor/bootstrap5-dark.css +113 -8
- package/styles/image-editor/bootstrap5.css +113 -8
- package/styles/image-editor/fabric-dark.css +114 -9
- package/styles/image-editor/fabric.css +113 -8
- package/styles/image-editor/fluent-dark.css +118 -9
- package/styles/image-editor/fluent.css +118 -9
- package/styles/image-editor/highcontrast-light.css +112 -7
- package/styles/image-editor/highcontrast.css +116 -7
- package/styles/image-editor/icons/_bootstrap-dark.scss +60 -0
- package/styles/image-editor/icons/_bootstrap.scss +60 -0
- package/styles/image-editor/icons/_bootstrap4.scss +60 -0
- package/styles/image-editor/icons/_bootstrap5.scss +60 -0
- package/styles/image-editor/icons/_fabric-dark.scss +60 -0
- package/styles/image-editor/icons/_fabric.scss +60 -0
- package/styles/image-editor/icons/_fluent.scss +66 -0
- package/styles/image-editor/icons/_highcontrast-light.scss +60 -0
- package/styles/image-editor/icons/_highcontrast.scss +60 -0
- package/styles/image-editor/icons/_material-dark.scss +60 -0
- package/styles/image-editor/icons/_material.scss +60 -0
- package/styles/image-editor/icons/_material3.scss +60 -0
- package/styles/image-editor/icons/_tailwind.scss +60 -0
- package/styles/image-editor/material-dark.css +113 -8
- package/styles/image-editor/material.css +113 -8
- package/styles/image-editor/material3-dark.css +126 -9
- package/styles/image-editor/material3.css +126 -9
- package/styles/image-editor/tailwind-dark.css +114 -9
- package/styles/image-editor/tailwind.css +114 -9
- package/styles/material-dark.css +113 -8
- package/styles/material.css +113 -8
- package/styles/material3-dark.css +126 -9
- package/styles/material3.css +126 -9
- package/styles/tailwind-dark.css +114 -9
- package/styles/tailwind.css +114 -9
package/styles/tailwind.css
CHANGED
|
@@ -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% -
|
|
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: #
|
|
565
|
+
background: #e5e7eb;
|
|
461
566
|
box-shadow: none;
|
|
462
|
-
color: #
|
|
567
|
+
color: #6b7280;
|
|
463
568
|
}
|
|
464
569
|
.e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
|
|
465
570
|
background: #f3f4f6;
|