@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.
- package/CHANGELOG.md +6 -54
- 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 +7227 -4367
- package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
- package/dist/es6/ej2-image-editor.es5.js +7295 -4422
- 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 +1691 -890
- 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 +923 -550
- package/src/image-editor/action/transform.d.ts +2 -0
- package/src/image-editor/action/transform.js +518 -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 +675 -172
- 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 +1415 -835
- 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
|
@@ -2,7 +2,7 @@ import { Component, INotifyPropertyChanged, ModuleDeclaration, BlazorDotnetObjec
|
|
|
2
2
|
import { EmitType } from '@syncfusion/ej2-base';
|
|
3
3
|
import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';
|
|
4
4
|
import { ChildProperty } from '@syncfusion/ej2-base';
|
|
5
|
-
import { ImageEditorModel, FinetuneSettingsModel, ZoomSettingsModel, SelectionSettingsModel } from './image-editor-model';
|
|
5
|
+
import { ImageEditorModel, FinetuneSettingsModel, ZoomSettingsModel, SelectionSettingsModel, FontFamilyModel } from './image-editor-model';
|
|
6
6
|
import { SelectionChangeEventArgs, Transition, ArrowheadType, ResizeEventArgs, FrameType, FrameLineStyle, FrameChangeEventArgs } from './../index';
|
|
7
7
|
import { ZoomEventArgs, PanEventArgs, CropEventArgs, RotateEventArgs, FlipEventArgs, ShapeChangeEventArgs } from './../index';
|
|
8
8
|
import { ToolbarEventArgs, OpenEventArgs, SaveEventArgs, BeforeSaveEventArgs, Point, ShapeSettings, ImageFilterEventArgs } from './../index';
|
|
@@ -179,6 +179,23 @@ export declare class SelectionSettings extends ChildProperty<SelectionSettings>
|
|
|
179
179
|
*/
|
|
180
180
|
fillColor: string;
|
|
181
181
|
}
|
|
182
|
+
/**
|
|
183
|
+
* Predefine the font families that populate in font family dropdown list from the toolbar.
|
|
184
|
+
*/
|
|
185
|
+
export declare class FontFamily extends ChildProperty<FontFamily> {
|
|
186
|
+
/**
|
|
187
|
+
* Specifies default font family selection
|
|
188
|
+
*
|
|
189
|
+
* @default 'Arial'
|
|
190
|
+
*/
|
|
191
|
+
default: string;
|
|
192
|
+
/**
|
|
193
|
+
* Specifies default font family items
|
|
194
|
+
*
|
|
195
|
+
* @default null
|
|
196
|
+
*/
|
|
197
|
+
items: DropDownButtonItemModel[];
|
|
198
|
+
}
|
|
182
199
|
/**
|
|
183
200
|
* The Image Editor is a graphical user interface for editing images.
|
|
184
201
|
*
|
|
@@ -313,6 +330,40 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
|
|
|
313
330
|
frameDestPoints: ImageDimension;
|
|
314
331
|
/** @hidden */
|
|
315
332
|
cxtTbarHeight: number;
|
|
333
|
+
/** @hidden */
|
|
334
|
+
straightenPoint: Point;
|
|
335
|
+
/** @hidden */
|
|
336
|
+
prevStraightenedDegree: number;
|
|
337
|
+
/** @hidden */
|
|
338
|
+
tempStraighten: number;
|
|
339
|
+
/** @hidden */
|
|
340
|
+
isStraightening: boolean;
|
|
341
|
+
/** @hidden */
|
|
342
|
+
prevEventSelectionPoint: SelectionPoint;
|
|
343
|
+
/** @hidden */
|
|
344
|
+
prevEventObjPoint: CurrentObject;
|
|
345
|
+
/** @hidden */
|
|
346
|
+
isCroppedEvent: boolean;
|
|
347
|
+
/** @hidden */
|
|
348
|
+
isResizeOkBtn: boolean;
|
|
349
|
+
/** @hidden */
|
|
350
|
+
isFinetuning: boolean;
|
|
351
|
+
/** @hidden */
|
|
352
|
+
isZoomBtnClick: boolean;
|
|
353
|
+
/** @hidden */
|
|
354
|
+
isFinetuneBtnClick: boolean;
|
|
355
|
+
/** @hidden */
|
|
356
|
+
isFilterCanvasClick: boolean;
|
|
357
|
+
/** @hidden */
|
|
358
|
+
isFrameBtnClick: boolean;
|
|
359
|
+
/** @hidden */
|
|
360
|
+
curFilterObjEvent: object;
|
|
361
|
+
/** @hidden */
|
|
362
|
+
curFinetuneObjEvent: object;
|
|
363
|
+
/** @hidden */
|
|
364
|
+
curFrameObjEvent: object;
|
|
365
|
+
/** @hidden */
|
|
366
|
+
isChangesSaved: boolean;
|
|
316
367
|
private lowerContext;
|
|
317
368
|
private upperContext;
|
|
318
369
|
private inMemoryContext;
|
|
@@ -563,6 +614,10 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
|
|
|
563
614
|
*
|
|
564
615
|
*/
|
|
565
616
|
selectionSettings: SelectionSettingsModel;
|
|
617
|
+
/**
|
|
618
|
+
* Predefine the font families that populate in font family dropdown list from the toolbar.
|
|
619
|
+
*/
|
|
620
|
+
fontFamily: FontFamilyModel;
|
|
566
621
|
/**
|
|
567
622
|
* Event callback that is raised before an image is saved.
|
|
568
623
|
*
|
|
@@ -674,6 +729,14 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
|
|
|
674
729
|
* @event click
|
|
675
730
|
*/
|
|
676
731
|
click: EmitType<ImageEditorClickEventArgs>;
|
|
732
|
+
/**
|
|
733
|
+
* Event callback that is raised after shape changing action is performed in an image editor.
|
|
734
|
+
* @remarks
|
|
735
|
+
* This event is triggered after changing stroke color, fill Color, and stroke width property for the shapes and after the shape is applied to the canvas while clicking the OK button in toolbar.
|
|
736
|
+
*
|
|
737
|
+
* @event shapeChange
|
|
738
|
+
*/
|
|
739
|
+
shapeChange: EmitType<ShapeChangeEventArgs>;
|
|
677
740
|
/**
|
|
678
741
|
* Event callback that is raised when opening the quick access toolbar.
|
|
679
742
|
*
|
|
@@ -1015,7 +1078,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
|
|
|
1015
1078
|
* @param {string} strokeColor - Specifies the stroke color of path.
|
|
1016
1079
|
* @returns {boolean}.
|
|
1017
1080
|
*/
|
|
1018
|
-
drawPath(pointColl: Point[], strokeWidth?: number, strokeColor?: string): boolean;
|
|
1081
|
+
drawPath(pointColl: Point[], strokeWidth?: number, strokeColor?: string, opacity?: number): boolean;
|
|
1019
1082
|
/**
|
|
1020
1083
|
* Draw a rectangle on an image.
|
|
1021
1084
|
*
|
|
@@ -1058,10 +1121,11 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
|
|
|
1058
1121
|
* @param {number} height - Specifies the height of the image.
|
|
1059
1122
|
* @param {boolean} isAspectRatio - Specifies whether to maintain aspect ratio or not.
|
|
1060
1123
|
* @param {number} degree - Specifies the degree to rotate the image.
|
|
1124
|
+
* @param {number} opacity - Specifies the value for the image.
|
|
1061
1125
|
* @returns {boolean}.
|
|
1062
1126
|
*
|
|
1063
1127
|
*/
|
|
1064
|
-
drawImage(data: string | ImageData, x?: number, y?: number, width?: number, height?: number, isAspectRatio?: boolean, degree?: number): boolean;
|
|
1128
|
+
drawImage(data: string | ImageData, x?: number, y?: number, width?: number, height?: number, isAspectRatio?: boolean, degree?: number, opacity?: number): boolean;
|
|
1065
1129
|
/**
|
|
1066
1130
|
* Select a shape based on the given shape id.
|
|
1067
1131
|
* Use 'getShapeSettings' method to get the shape id which is then passed to perform selection.
|
|
@@ -1180,6 +1244,37 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
|
|
|
1180
1244
|
* @returns {boolean}.
|
|
1181
1245
|
*/
|
|
1182
1246
|
drawFrame(frameType: FrameType, color?: string, gradientColor?: string, size?: number, inset?: number, offset?: number, borderRadius?: number, frameLineStyle?: FrameLineStyle, lineCount?: number): boolean;
|
|
1247
|
+
/**
|
|
1248
|
+
* Straightens an image by rotating it clockwise or counterclockwise.
|
|
1249
|
+
*
|
|
1250
|
+
* @param {number} degree - The degree value specifying the amount of rotation for straightening the image.
|
|
1251
|
+
* Positive values indicate clockwise rotation, while negative values indicate counterclockwise rotation.
|
|
1252
|
+
*
|
|
1253
|
+
* @remarks
|
|
1254
|
+
* The degree value should be within the range of -45 to +45 degrees for accurate straightening.
|
|
1255
|
+
*
|
|
1256
|
+
* @returns {boolean} - A boolean value indicating the success of the straightening operation.
|
|
1257
|
+
*/
|
|
1258
|
+
straightenImage(degree: number): boolean;
|
|
1259
|
+
/**
|
|
1260
|
+
* This method is used to update the existing shapes by changing its height, width, color, and font styles in the component.
|
|
1261
|
+
* Use 'getShapeSettings' method to get the shape which is then passed to change the options of a shape.
|
|
1262
|
+
* {% codeBlock src='image-editor/updateShape/index.md' %}{% endcodeBlock %}
|
|
1263
|
+
*
|
|
1264
|
+
* @param {ShapeSettings} setting - Specifies the shape settings to be updated for the shape on an image.
|
|
1265
|
+
* @returns {boolean}.
|
|
1266
|
+
*
|
|
1267
|
+
*/
|
|
1268
|
+
updateShape(setting: ShapeSettings): boolean;
|
|
1269
|
+
/**
|
|
1270
|
+
* Duplicates a shape based on the given shape ID in the ImageEditor.
|
|
1271
|
+
* Use 'getShapeSettings' method to get the shape and then pass a shapeId from the returned shape to clone a shape.
|
|
1272
|
+
*
|
|
1273
|
+
* @param {string} shapeId - Specifies the shape id to clone a shape on an image.
|
|
1274
|
+
* @returns {boolean}.
|
|
1275
|
+
*
|
|
1276
|
+
*/
|
|
1277
|
+
cloneShape(shapeId: string): boolean;
|
|
1183
1278
|
private toolbarTemplateFn;
|
|
1184
1279
|
private quickAccessToolbarTemplateFn;
|
|
1185
1280
|
private templateParser;
|
|
@@ -1373,6 +1468,7 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
|
|
|
1373
1468
|
* Apply rotate image.
|
|
1374
1469
|
*
|
|
1375
1470
|
* @param { string } rotate - Specifies the direction of rotation.
|
|
1471
|
+
* @param { boolean } isPreventURC - Specifies to update undo redo collection.
|
|
1376
1472
|
* @hidden
|
|
1377
1473
|
* @returns {void}.
|
|
1378
1474
|
*/
|
|
@@ -1408,6 +1504,30 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
|
|
|
1408
1504
|
* @returns {string}.
|
|
1409
1505
|
*/
|
|
1410
1506
|
getDefaultFilter(): string;
|
|
1507
|
+
/**
|
|
1508
|
+
* Performs Straightening action.
|
|
1509
|
+
*
|
|
1510
|
+
* @hidden
|
|
1511
|
+
* @returns {void}.
|
|
1512
|
+
*/
|
|
1513
|
+
setStraighten(value: number, isMethod?: boolean): void;
|
|
1514
|
+
private duplicateImage;
|
|
1515
|
+
private performStraighten;
|
|
1516
|
+
/**
|
|
1517
|
+
* Straightens base image.
|
|
1518
|
+
*
|
|
1519
|
+
* @hidden
|
|
1520
|
+
* @returns {void}.
|
|
1521
|
+
*/
|
|
1522
|
+
straightenBaseImageCanvas(): void;
|
|
1523
|
+
/**
|
|
1524
|
+
* Returns rotated canvas dimension.
|
|
1525
|
+
*
|
|
1526
|
+
* @hidden
|
|
1527
|
+
* @returns {void}.
|
|
1528
|
+
*/
|
|
1529
|
+
getRotatedCanvasDim(width: number, height: number, angle: number): Dimension;
|
|
1530
|
+
private getStraightenFlipState;
|
|
1411
1531
|
/**
|
|
1412
1532
|
* To Initialize the component rendering
|
|
1413
1533
|
*
|
|
@@ -1439,4 +1559,5 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
|
|
|
1439
1559
|
* @returns {void}.
|
|
1440
1560
|
*/
|
|
1441
1561
|
triggerShapeChanged(shapeChangedArgs: ShapeChangeEventArgs): void;
|
|
1562
|
+
private triggerActionComplete;
|
|
1442
1563
|
}
|