@omnia/fx 8.0.102-vnext → 8.0.104-vnext
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/internal-do-not-import-from-here/core/messaging/InternalTopics.d.ts +3 -0
- package/internal-do-not-import-from-here/core/services/ServiceManifestProviderInternal.d.ts +2 -2
- package/internal-do-not-import-from-here/core/utils/Utils.d.ts +6 -6
- package/internal-do-not-import-from-here/index.d.ts +5 -5
- package/internal-do-not-import-from-here/manifests/omnia.fx.ux.manifest.json +1 -1
- package/internal-do-not-import-from-here/runtime/core/InternalWebComponentBootstrapper.d.ts +4 -4
- package/internal-do-not-import-from-here/runtime/core/ManifestByElementLoader.d.ts +1 -0
- package/internal-do-not-import-from-here/runtime/core/PrivateWebComponentBootstrapper.d.ts +7 -7
- package/internal-do-not-import-from-here/ux/Exposes.d.ts +1 -1
- package/internal-do-not-import-from-here/ux/InternalDefineWebComponent.d.ts +20 -36
- package/internal-do-not-import-from-here/ux/admin/queryableproperties/QueryablePropertiesJourneyConstants.d.ts +4 -6
- package/internal-do-not-import-from-here/ux/enterpriseproperties/picker/EnterprisePropertyPicker.d.ts +17 -0
- package/internal-do-not-import-from-here/ux/imagetransformation/utils.d.ts +6 -6
- package/internal-do-not-import-from-here/ux/imagetransformer/Components/ImageRollup/ImageRollup.d.ts +1 -66
- package/internal-do-not-import-from-here/ux/imagetransformer/Components/ImageTransformCropper/ImageTransformCropper.d.ts +280 -44
- package/internal-do-not-import-from-here/ux/imagetransformer/Components/ImageTransformEditor/ImageTransformEditor.css.d.ts +9 -0
- package/internal-do-not-import-from-here/ux/imagetransformer/Components/ImageTransformEditor/ImageTransformEditor.d.ts +18 -17
- package/internal-do-not-import-from-here/ux/imagetransformer/Components/ImageTransformEditor/ImageTransformEditor_old.d.ts +0 -66
- package/internal-do-not-import-from-here/ux/imagetransformer/Components/ImageTransformFilter/ImageTransformFilter.d.ts +130 -17
- package/internal-do-not-import-from-here/ux/imagetransformer/Components/ImageTransformFilter/ImageTransformFilter_old.d.ts +23 -0
- package/internal-do-not-import-from-here/ux/imagetransformer/ImageTransformer.css.d.ts +6 -1
- package/internal-do-not-import-from-here/ux/imagetransformer/ImageTransformer.d.ts +4 -5
- package/internal-do-not-import-from-here/ux/imagetransformer/ImageTransformer_older.d.ts +1 -40
- package/internal-do-not-import-from-here/ux/layoutcanvas/editor/LayoutEditorCanvas.d.ts +6 -6
- package/internal-do-not-import-from-here/ux/oxide/dialog/Dialog.css.d.ts +3 -4
- package/internal-do-not-import-from-here/ux/oxide/divider/Divider.d.ts +8 -8
- package/internal-do-not-import-from-here/ux/oxide/draggable/Draggable.d.ts +134 -464
- package/internal-do-not-import-from-here/ux/oxide/list/List.css.d.ts +1 -1
- package/internal-do-not-import-from-here/ux/oxide/list/List.d.ts +11 -0
- package/internal-do-not-import-from-here/ux/oxide/panel/Panel.css.d.ts +1 -1
- package/internal-do-not-import-from-here/ux/oxide/panel/Panel.d.ts +6 -5
- package/internal-do-not-import-from-here/ux/oxide/slider/Slider.d.ts +2 -2
- package/internal-do-not-import-from-here/ux/oxide/toolbar/Toolbar.css.d.ts +4 -1
- package/internal-do-not-import-from-here/ux/oxide/toolbar/Toolbar.d.ts +16 -5
- package/internal-do-not-import-from-here/ux/theming-v2/designkits/default/index.d.ts +1 -0
- package/internal-do-not-import-from-here/ux/theming-v2/{skins/default/useDefaultSkin.d.ts → designkits/default/useDefaultDesignKit.d.ts} +1 -1
- package/internal-do-not-import-from-here/ux/theming-v2/designkits/documentation/index.d.ts +1 -0
- package/internal-do-not-import-from-here/ux/theming-v2/{skins/documentation/useDocumentationSkin.d.ts → designkits/documentation/useDocumentationDesignKit.d.ts} +1 -1
- package/internal-do-not-import-from-here/ux/theming-v2/designkits/editor/index.d.ts +1 -0
- package/internal-do-not-import-from-here/ux/theming-v2/{skins/editor/useEditorSkin.d.ts → designkits/editor/useEditorDesignKit.d.ts} +1 -1
- package/internal-do-not-import-from-here/ux/theming-v2/designkits/index.d.ts +1 -0
- package/internal-do-not-import-from-here/ux/theming-v2/{skins/useSkins.d.ts → designkits/useDesignKits.d.ts} +1 -1
- package/internal-do-not-import-from-here/ux/theming-v2/index.d.ts +1 -1
- package/internal-do-not-import-from-here/ux/use/UseIcon.d.ts +10 -0
- package/internal-do-not-import-from-here/ux/velcron/core/models/VelcronDefinitions.d.ts +9 -2
- package/internal-do-not-import-from-here/ux/velcron/core/stores/ReactivitySystem.d.ts +2 -2
- package/internal-do-not-import-from-here/ux/velcron/editor/models/VelcronDescriptors.d.ts +1 -1
- package/internal-do-not-import-from-here/vue/VueApp.d.ts +2 -2
- package/package.json +3 -3
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/action.d.ts +0 -101
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/addIcon.d.ts +0 -20
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/addImageObject.d.ts +0 -16
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/addObject.d.ts +0 -17
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/addShape.d.ts +0 -27
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/addText.d.ts +0 -26
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/applyFilter.d.ts +0 -20
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/changeIconColor.d.ts +0 -17
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/changeShape.d.ts +0 -28
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/changeText.d.ts +0 -17
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/changeTextStyle.d.ts +0 -25
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/clearObjects.d.ts +0 -16
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/flip.d.ts +0 -16
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/loadImage.d.ts +0 -17
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/removeFilter.d.ts +0 -17
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/removeObject.d.ts +0 -16
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/resizeCanvasDimension.d.ts +0 -16
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/rotate.d.ts +0 -18
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/setObjectPosition.d.ts +0 -21
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/command/setObjectProperties.d.ts +0 -25
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/component/cropper.d.ts +0 -118
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/component/filter.d.ts +0 -89
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/component/flip.d.ts +0 -70
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/component/freeDrawing.d.ts +0 -26
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/component/icon.d.ts +0 -51
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/component/imageLoader.d.ts +0 -30
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/component/line.d.ts +0 -55
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/component/rotation.d.ts +0 -42
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/component/shape.d.ts +0 -144
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/component/text.d.ts +0 -173
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/consts.d.ts +0 -243
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/dependencies/tui-code-snippet.d.ts +0 -1
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/drawingMode/cropper.d.ts +0 -26
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/drawingMode/freeDrawing.d.ts +0 -27
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/drawingMode/lineDrawing.d.ts +0 -27
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/drawingMode/shape.d.ts +0 -26
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/drawingMode/text.d.ts +0 -26
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/extension/arrowLine.d.ts +0 -2
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/extension/blur.d.ts +0 -8
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/extension/colorFilter.d.ts +0 -8
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/extension/cropzone.d.ts +0 -10
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/extension/emboss.d.ts +0 -8
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/extension/mask.d.ts +0 -8
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/extension/sharpen.d.ts +0 -8
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/factory/command.d.ts +0 -27
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/factory/errorMessage.d.ts +0 -5
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/graphics.d.ts +0 -569
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/helper/imagetracer.d.ts +0 -56
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/helper/shapeFilterFillHelper.d.ts +0 -44
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/helper/shapeResizeHelper.d.ts +0 -20
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/imageEditor.d.ts +0 -1003
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/index.d.ts +0 -15
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/interface/command.d.ts +0 -49
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/interface/component.d.ts +0 -76
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/interface/drawingMode.d.ts +0 -26
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/interfaces.d.ts +0 -283
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/invoker.d.ts +0 -91
- package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/util.d.ts +0 -154
- package/internal-do-not-import-from-here/ux/mediapicker/components/ImageEditor.css.d.ts +0 -15
- package/internal-do-not-import-from-here/ux/mediapicker/components/ImageEditor.d.ts +0 -91
- package/internal-do-not-import-from-here/ux/theming-v2/skins/default/index.d.ts +0 -1
- package/internal-do-not-import-from-here/ux/theming-v2/skins/documentation/index.d.ts +0 -1
- package/internal-do-not-import-from-here/ux/theming-v2/skins/editor/index.d.ts +0 -1
- package/internal-do-not-import-from-here/ux/theming-v2/skins/index.d.ts +0 -1
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/core/Colors.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/core/ThemeDefinitionInstance.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/core/index.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/DefinitionRegistrations.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/ThemeRegistrations.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/definitions/cards/BannerImageTop.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/definitions/cards/RollupAvatar.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/definitions/cards/RollupImageLarge.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/definitions/cards/RollupImageSmall.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/definitions/cards/RollupImageTop.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/definitions/cards/RollupImageTopAvatar.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/definitions/cards/index.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/definitions/content/Contentblocks.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/definitions/content/Image.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/definitions/content/ImageText.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/definitions/content/Quote.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/definitions/content/Text.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/definitions/content/index.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/definitions/headers/BlockTextIcon.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/definitions/headers/Pageheader.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/definitions/headers/index.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/definitions/index.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/themes/Blueprints.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/themes/SpacingTypes.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/themes/ThemeDefinitions.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/themes/TypographyTypes.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/default/themes/index.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/documentation/ApiRegistrations.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/documentation/themes/Blueprints.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/documentation/themes/SpacingTypes.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/documentation/themes/ThemeDefinitions.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/documentation/themes/TypographyTypes.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/documentation/themes/index.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/editor/ThemeRegistrations.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/editor/themes/Blueprints.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/editor/themes/SpacingTypes.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/editor/themes/ThemeDefinitions.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/editor/themes/TypographyTypes.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/editor/themes/index.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/pages/DefinitionRegistrations.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/pages/definitions/headers/HeaderWithImage.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/pages/definitions/property/PropertiesWithColumLayout.d.ts +0 -0
- /package/internal-do-not-import-from-here/ux/theming-v2/{skins → designkits}/pages/definitions/property/PropertiesWithRowLayout.d.ts +0 -0
package/internal-do-not-import-from-here/ux/imagetransformer/tui-image-editor/imageEditor.d.ts
DELETED
@@ -1,1003 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Image filter result
|
3
|
-
* @typedef {object} FilterResult
|
4
|
-
* @property {string} type - filter type like 'mask', 'Grayscale' and so on
|
5
|
-
* @property {string} action - action type like 'add', 'remove'
|
6
|
-
*/
|
7
|
-
/**
|
8
|
-
* Flip status
|
9
|
-
* @typedef {object} FlipStatus
|
10
|
-
* @property {boolean} flipX - x axis
|
11
|
-
* @property {boolean} flipY - y axis
|
12
|
-
* @property {Number} angle - angle
|
13
|
-
*/
|
14
|
-
/**
|
15
|
-
* Rotation status
|
16
|
-
* @typedef {Number} RotateStatus
|
17
|
-
* @property {Number} angle - angle
|
18
|
-
*/
|
19
|
-
/**
|
20
|
-
* Old and new Size
|
21
|
-
* @typedef {object} SizeChange
|
22
|
-
* @property {Number} oldWidth - old width
|
23
|
-
* @property {Number} oldHeight - old height
|
24
|
-
* @property {Number} newWidth - new width
|
25
|
-
* @property {Number} newHeight - new height
|
26
|
-
*/
|
27
|
-
/**
|
28
|
-
* @typedef {string} ErrorMsg - {string} error message
|
29
|
-
*/
|
30
|
-
/**
|
31
|
-
* @typedef {object} ObjectProps - graphics object properties
|
32
|
-
* @property {number} id - object id
|
33
|
-
* @property {string} type - object type
|
34
|
-
* @property {string} text - text content
|
35
|
-
* @property {(string | number)} left - Left
|
36
|
-
* @property {(string | number)} top - Top
|
37
|
-
* @property {(string | number)} width - Width
|
38
|
-
* @property {(string | number)} height - Height
|
39
|
-
* @property {string} fill - Color
|
40
|
-
* @property {string} stroke - Stroke
|
41
|
-
* @property {(string | number)} strokeWidth - StrokeWidth
|
42
|
-
* @property {string} fontFamily - Font type for text
|
43
|
-
* @property {number} fontSize - Font Size
|
44
|
-
* @property {string} fontStyle - Type of inclination (normal / italic)
|
45
|
-
* @property {string} fontWeight - Type of thicker or thinner looking (normal / bold)
|
46
|
-
* @property {string} textAlign - Type of text align (left / center / right)
|
47
|
-
* @property {string} textDecoration - Type of line (underline / line-through / overline)
|
48
|
-
*/
|
49
|
-
/**
|
50
|
-
* Shape filter option
|
51
|
-
* @typedef {object.<string, number>} ShapeFillFilterOption
|
52
|
-
*/
|
53
|
-
/**
|
54
|
-
* Shape filter option
|
55
|
-
* @typedef {object} ShapeFillOption - fill option of shape
|
56
|
-
* @property {string} type - fill type ('color' or 'filter')
|
57
|
-
* @property {Array.<ShapeFillFilterOption>} [filter] - {@link ShapeFilterOption} List.
|
58
|
-
* only applies to filter types
|
59
|
-
* (ex: [\{pixelate: 20\}, \{blur: 0.3\}])
|
60
|
-
* @property {string} [color] - Shape foreground color (ex: '#fff', 'transparent')
|
61
|
-
*/
|
62
|
-
/**
|
63
|
-
* Image editor
|
64
|
-
* @class
|
65
|
-
* @param {string|HTMLElement} wrapper - Wrapper's element or selector
|
66
|
-
* @param {Object} [options] - Canvas max width & height of css
|
67
|
-
* @param {number} [options.includeUI] - Use the provided UI
|
68
|
-
* @param {Object} [options.includeUI.loadImage] - Basic editing image
|
69
|
-
* @param {string} options.includeUI.loadImage.path - image path
|
70
|
-
* @param {string} options.includeUI.loadImage.name - image name
|
71
|
-
* @param {Object} [options.includeUI.theme] - Theme object
|
72
|
-
* @param {Array} [options.includeUI.menu] - It can be selected when only specific menu is used, Default values are \['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'\].
|
73
|
-
* @param {string} [options.includeUI.initMenu] - The first menu to be selected and started.
|
74
|
-
* @param {Object} [options.includeUI.uiSize] - ui size of editor
|
75
|
-
* @param {string} options.includeUI.uiSize.width - width of ui
|
76
|
-
* @param {string} options.includeUI.uiSize.height - height of ui
|
77
|
-
* @param {string} [options.includeUI.menuBarPosition=bottom] - Menu bar position('top', 'bottom', 'left', 'right')
|
78
|
-
* @param {number} options.cssMaxWidth - Canvas css-max-width
|
79
|
-
* @param {number} options.cssMaxHeight - Canvas css-max-height
|
80
|
-
* @param {Object} [options.selectionStyle] - selection style
|
81
|
-
* @param {string} [options.selectionStyle.cornerStyle] - selection corner style
|
82
|
-
* @param {number} [options.selectionStyle.cornerSize] - selection corner size
|
83
|
-
* @param {string} [options.selectionStyle.cornerColor] - selection corner color
|
84
|
-
* @param {string} [options.selectionStyle.cornerStrokeColor] = selection corner stroke color
|
85
|
-
* @param {boolean} [options.selectionStyle.transparentCorners] - selection corner transparent
|
86
|
-
* @param {number} [options.selectionStyle.lineWidth] - selection line width
|
87
|
-
* @param {string} [options.selectionStyle.borderColor] - selection border color
|
88
|
-
* @param {number} [options.selectionStyle.rotatingPointOffset] - selection rotating point length
|
89
|
-
* @param {Boolean} [options.usageStatistics=true] - Let us know the hostname. If you don't want to send the hostname, please set to false.
|
90
|
-
* @example
|
91
|
-
* var ImageEditor = require('tui-image-editor');
|
92
|
-
* var blackTheme = require('./js/theme/black-theme.js');
|
93
|
-
* var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
|
94
|
-
* includeUI: {
|
95
|
-
* loadImage: {
|
96
|
-
* path: 'img/sampleImage.jpg',
|
97
|
-
* name: 'SampleImage'
|
98
|
-
* },
|
99
|
-
* theme: blackTheme, // or whiteTheme
|
100
|
-
* menu: ['shape', 'filter'],
|
101
|
-
* initMenu: 'filter',
|
102
|
-
* uiSize: {
|
103
|
-
* width: '1000px',
|
104
|
-
* height: '700px'
|
105
|
-
* },
|
106
|
-
* menuBarPosition: 'bottom'
|
107
|
-
* },
|
108
|
-
* cssMaxWidth: 700,
|
109
|
-
* cssMaxHeight: 500,
|
110
|
-
* selectionStyle: {
|
111
|
-
* cornerSize: 20,
|
112
|
-
* rotatingPointOffset: 70
|
113
|
-
* }
|
114
|
-
* });
|
115
|
-
*/
|
116
|
-
declare class ImageEditor {
|
117
|
-
constructor(wrapper: any, options: any);
|
118
|
-
/**
|
119
|
-
* Set selection style by init option
|
120
|
-
* @param {Object} selectionStyle - Selection styles
|
121
|
-
* @param {Object} applyTargets - Selection apply targets
|
122
|
-
* @param {boolean} applyCropSelectionStyle - whether apply with crop selection style or not
|
123
|
-
* @param {boolean} applyGroupSelectionStyle - whether apply with group selection style or not
|
124
|
-
* @private
|
125
|
-
*/
|
126
|
-
_setSelectionStyle(selectionStyle: any, { applyCropSelectionStyle, applyGroupSelectionStyle }: {
|
127
|
-
applyCropSelectionStyle: any;
|
128
|
-
applyGroupSelectionStyle: any;
|
129
|
-
}): void;
|
130
|
-
/**
|
131
|
-
* Attach invoker events
|
132
|
-
* @private
|
133
|
-
*/
|
134
|
-
_attachInvokerEvents(): void;
|
135
|
-
/**
|
136
|
-
* Attach canvas events
|
137
|
-
* @private
|
138
|
-
*/
|
139
|
-
_attachGraphicsEvents(): void;
|
140
|
-
/**
|
141
|
-
* Attach dom events
|
142
|
-
* @private
|
143
|
-
*/
|
144
|
-
_attachDomEvents(): void;
|
145
|
-
/**
|
146
|
-
* Detach dom events
|
147
|
-
* @private
|
148
|
-
*/
|
149
|
-
_detachDomEvents(): void;
|
150
|
-
/**
|
151
|
-
* Keydown event handler
|
152
|
-
* @param {KeyboardEvent} e - Event object
|
153
|
-
* @private
|
154
|
-
*/
|
155
|
-
_onKeyDown(e: any): void;
|
156
|
-
/**
|
157
|
-
* Remove Active Object
|
158
|
-
*/
|
159
|
-
removeActiveObject(): boolean;
|
160
|
-
/**
|
161
|
-
* mouse down event handler
|
162
|
-
* @param {Event} event mouse down event
|
163
|
-
* @param {Object} originPointer origin pointer
|
164
|
-
* @param {Number} originPointer.x x position
|
165
|
-
* @param {Number} originPointer.y y position
|
166
|
-
* @private
|
167
|
-
*/
|
168
|
-
_onMouseDown(event: any, originPointer: any): void;
|
169
|
-
/**
|
170
|
-
* mouse up event handler
|
171
|
-
* @param {Event} event up down event
|
172
|
-
* @param {Object} originPointer origin pointer
|
173
|
-
* @param {Number} originPointer.x x position
|
174
|
-
* @param {Number} originPointer.y y position
|
175
|
-
* @private
|
176
|
-
*/
|
177
|
-
_onMouseUp(): void;
|
178
|
-
/**
|
179
|
-
* Add a 'addObject' command
|
180
|
-
* @param {Object} obj - Fabric object
|
181
|
-
* @private
|
182
|
-
*/
|
183
|
-
_pushAddObjectCommand(obj: any): void;
|
184
|
-
/**
|
185
|
-
* 'objectActivated' event handler
|
186
|
-
* @param {ObjectProps} props - object properties
|
187
|
-
* @private
|
188
|
-
*/
|
189
|
-
_onObjectActivated(props: any): void;
|
190
|
-
/**
|
191
|
-
* 'objectMoved' event handler
|
192
|
-
* @param {ObjectProps} props - object properties
|
193
|
-
* @private
|
194
|
-
*/
|
195
|
-
_onObjectMoved(props: any): void;
|
196
|
-
/**
|
197
|
-
* 'objectScaled' event handler
|
198
|
-
* @param {ObjectProps} props - object properties
|
199
|
-
* @private
|
200
|
-
*/
|
201
|
-
_onObjectScaled(props: any): void;
|
202
|
-
/**
|
203
|
-
* 'objectRotated' event handler
|
204
|
-
* @param {ObjectProps} props - object properties
|
205
|
-
* @private
|
206
|
-
*/
|
207
|
-
_onObjectRotated(props: any): void;
|
208
|
-
/**
|
209
|
-
* Get current drawing mode
|
210
|
-
* @returns {string}
|
211
|
-
* @example
|
212
|
-
* // Image editor drawing mode
|
213
|
-
* //
|
214
|
-
* // NORMAL: 'NORMAL'
|
215
|
-
* // CROPPER: 'CROPPER'
|
216
|
-
* // FREE_DRAWING: 'FREE_DRAWING'
|
217
|
-
* // LINE_DRAWING: 'LINE_DRAWING'
|
218
|
-
* // TEXT: 'TEXT'
|
219
|
-
* //
|
220
|
-
* if (imageEditor.getDrawingMode() === 'FREE_DRAWING') {
|
221
|
-
* imageEditor.stopDrawingMode();
|
222
|
-
* }
|
223
|
-
*/
|
224
|
-
getDrawingMode(): any;
|
225
|
-
/**
|
226
|
-
* Clear all objects
|
227
|
-
* @returns {Promise}
|
228
|
-
* @example
|
229
|
-
* imageEditor.clearObjects();
|
230
|
-
*/
|
231
|
-
clearObjects(): any;
|
232
|
-
/**
|
233
|
-
* Deactivate all objects
|
234
|
-
* @example
|
235
|
-
* imageEditor.deactivateAll();
|
236
|
-
*/
|
237
|
-
deactivateAll(): void;
|
238
|
-
/**
|
239
|
-
* discard selction
|
240
|
-
* @example
|
241
|
-
* imageEditor.discardSelection();
|
242
|
-
*/
|
243
|
-
discardSelection(): void;
|
244
|
-
/**
|
245
|
-
* selectable status change
|
246
|
-
* @param {boolean} selectable - selctable status
|
247
|
-
* @example
|
248
|
-
* imageEditor.changeSelectableAll(false); // or true
|
249
|
-
*/
|
250
|
-
changeSelectableAll(selectable: any): void;
|
251
|
-
/**
|
252
|
-
* Invoke command
|
253
|
-
* @param {String} commandName - Command name
|
254
|
-
* @param {...*} args - Arguments for creating command
|
255
|
-
* @returns {Promise}
|
256
|
-
* @private
|
257
|
-
*/
|
258
|
-
execute(commandName: any, ...args: any[]): any;
|
259
|
-
/**
|
260
|
-
* Invoke command
|
261
|
-
* @param {String} commandName - Command name
|
262
|
-
* @param {...*} args - Arguments for creating command
|
263
|
-
* @returns {Promise}
|
264
|
-
* @private
|
265
|
-
*/
|
266
|
-
executeSilent(commandName: any, ...args: any[]): any;
|
267
|
-
/**
|
268
|
-
* Undo
|
269
|
-
* @returns {Promise}
|
270
|
-
* @example
|
271
|
-
* imageEditor.undo();
|
272
|
-
*/
|
273
|
-
undo(): any;
|
274
|
-
/**
|
275
|
-
* Redo
|
276
|
-
* @returns {Promise}
|
277
|
-
* @example
|
278
|
-
* imageEditor.redo();
|
279
|
-
*/
|
280
|
-
redo(): any;
|
281
|
-
/**
|
282
|
-
* Load image from file
|
283
|
-
* @param {File} imgFile - Image file
|
284
|
-
* @param {string} [imageName] - imageName
|
285
|
-
* @returns {Promise<SizeChange, ErrorMsg>}
|
286
|
-
* @example
|
287
|
-
* imageEditor.loadImageFromFile(file).then(result => {
|
288
|
-
* console.log('old : ' + result.oldWidth + ', ' + result.oldHeight);
|
289
|
-
* console.log('new : ' + result.newWidth + ', ' + result.newHeight);
|
290
|
-
* });
|
291
|
-
*/
|
292
|
-
loadImageFromFile(imgFile: any, imageName: any): any;
|
293
|
-
/**
|
294
|
-
* Load image from url
|
295
|
-
* @param {string} url - File url
|
296
|
-
* @param {string} imageName - imageName
|
297
|
-
* @returns {Promise<SizeChange, ErrorMsg>}
|
298
|
-
* @example
|
299
|
-
* imageEditor.loadImageFromURL('http://url/testImage.png', 'lena').then(result => {
|
300
|
-
* console.log('old : ' + result.oldWidth + ', ' + result.oldHeight);
|
301
|
-
* console.log('new : ' + result.newWidth + ', ' + result.newHeight);
|
302
|
-
* });
|
303
|
-
*/
|
304
|
-
loadImageFromURL(url: any, imageName: any): any;
|
305
|
-
/**
|
306
|
-
* Add image object on canvas
|
307
|
-
* @param {string} imgUrl - Image url to make object
|
308
|
-
* @returns {Promise<ObjectProps, ErrorMsg>}
|
309
|
-
* @example
|
310
|
-
* imageEditor.addImageObject('path/fileName.jpg').then(objectProps => {
|
311
|
-
* console.log(ojectProps.id);
|
312
|
-
* });
|
313
|
-
*/
|
314
|
-
addImageObject(imgUrl: any): any;
|
315
|
-
/**
|
316
|
-
* Start a drawing mode. If the current mode is not 'NORMAL', 'stopDrawingMode()' will be called first.
|
317
|
-
* @param {String} mode Can be one of <I>'CROPPER', 'FREE_DRAWING', 'LINE_DRAWING', 'TEXT', 'SHAPE'</I>
|
318
|
-
* @param {Object} [option] parameters of drawing mode, it's available with 'FREE_DRAWING', 'LINE_DRAWING'
|
319
|
-
* @param {Number} [option.width] brush width
|
320
|
-
* @param {String} [option.color] brush color
|
321
|
-
* @returns {boolean} true if success or false
|
322
|
-
* @example
|
323
|
-
* imageEditor.startDrawingMode('FREE_DRAWING', {
|
324
|
-
* width: 10,
|
325
|
-
* color: 'rgba(255,0,0,0.5)'
|
326
|
-
* });
|
327
|
-
*/
|
328
|
-
startDrawingMode(mode: any, option?: any): any;
|
329
|
-
/**
|
330
|
-
* Stop the current drawing mode and back to the 'NORMAL' mode
|
331
|
-
* @example
|
332
|
-
* imageEditor.stopDrawingMode();
|
333
|
-
*/
|
334
|
-
stopDrawingMode(): void;
|
335
|
-
/**
|
336
|
-
* Crop this image with rect
|
337
|
-
* @param {Object} rect crop rect
|
338
|
-
* @param {Number} rect.left left position
|
339
|
-
* @param {Number} rect.top top position
|
340
|
-
* @param {Number} rect.width width
|
341
|
-
* @param {Number} rect.height height
|
342
|
-
* @returns {Promise}
|
343
|
-
* @example
|
344
|
-
* imageEditor.crop(imageEditor.getCropzoneRect());
|
345
|
-
*/
|
346
|
-
crop(rect: any): any;
|
347
|
-
/**
|
348
|
-
* Get the cropping rect
|
349
|
-
* @returns {Object} {{left: number, top: number, width: number, height: number}} rect
|
350
|
-
*/
|
351
|
-
getCropzoneRect(): any;
|
352
|
-
/**
|
353
|
-
* Set the cropping rect
|
354
|
-
* @param {number} [mode] crop rect mode [1, 1.5, 1.3333333333333333, 1.25, 1.7777777777777777]
|
355
|
-
*/
|
356
|
-
setCropzoneRect(mode: any): void;
|
357
|
-
/**
|
358
|
-
* Set the cropping rect
|
359
|
-
* @param {Object} cropRect cropzone rect
|
360
|
-
* @param {Number} presetRatio
|
361
|
-
* @param {Number} cropRect.left left position
|
362
|
-
* @param {Number} cropRect.top top position
|
363
|
-
* @param {Number} cropRect.width width
|
364
|
-
* @param {Number} cropRect.height height
|
365
|
-
*/
|
366
|
-
restoreCropzoneRect(presetRatio: any, cropRect: any): void;
|
367
|
-
isValidCropzoneRect(): boolean;
|
368
|
-
/**
|
369
|
-
* Flip
|
370
|
-
* @returns {Promise}
|
371
|
-
* @param {string} type - 'flipX' or 'flipY' or 'reset'
|
372
|
-
* @returns {Promise<FlipStatus, ErrorMsg>}
|
373
|
-
* @private
|
374
|
-
*/
|
375
|
-
_flip(type: any): any;
|
376
|
-
/**
|
377
|
-
* Flip x
|
378
|
-
* @returns {Promise<FlipStatus, ErrorMsg>}
|
379
|
-
* @example
|
380
|
-
* imageEditor.flipX().then((status => {
|
381
|
-
* console.log('flipX: ', status.flipX);
|
382
|
-
* console.log('flipY: ', status.flipY);
|
383
|
-
* console.log('angle: ', status.angle);
|
384
|
-
* }).catch(message => {
|
385
|
-
* console.log('error: ', message);
|
386
|
-
* });
|
387
|
-
*/
|
388
|
-
flipX(): any;
|
389
|
-
/**
|
390
|
-
* Flip y
|
391
|
-
* @returns {Promise<FlipStatus, ErrorMsg>}
|
392
|
-
* @example
|
393
|
-
* imageEditor.flipY().then(status => {
|
394
|
-
* console.log('flipX: ', status.flipX);
|
395
|
-
* console.log('flipY: ', status.flipY);
|
396
|
-
* console.log('angle: ', status.angle);
|
397
|
-
* }).catch(message => {
|
398
|
-
* console.log('error: ', message);
|
399
|
-
* });
|
400
|
-
*/
|
401
|
-
flipY(): any;
|
402
|
-
/**
|
403
|
-
* Reset flip
|
404
|
-
* @returns {Promise<FlipStatus, ErrorMsg>}
|
405
|
-
* @example
|
406
|
-
* imageEditor.resetFlip().then(status => {
|
407
|
-
* console.log('flipX: ', status.flipX);
|
408
|
-
* console.log('flipY: ', status.flipY);
|
409
|
-
* console.log('angle: ', status.angle);
|
410
|
-
* }).catch(message => {
|
411
|
-
* console.log('error: ', message);
|
412
|
-
* });;
|
413
|
-
*/
|
414
|
-
resetFlip(): any;
|
415
|
-
/**
|
416
|
-
* @param {string} type - 'rotate' or 'setAngle'
|
417
|
-
* @param {number} angle - angle value (degree)
|
418
|
-
* @param {boolean} isSilent - is silent execution or not
|
419
|
-
* @returns {Promise<RotateStatus, ErrorMsg>}
|
420
|
-
* @private
|
421
|
-
*/
|
422
|
-
_rotate(type: any, angle: any, isSilent: any): any;
|
423
|
-
/**
|
424
|
-
* Rotate image
|
425
|
-
* @returns {Promise}
|
426
|
-
* @param {number} angle - Additional angle to rotate image
|
427
|
-
* @param {boolean} isSilent - is silent execution or not
|
428
|
-
* @returns {Promise<RotateStatus, ErrorMsg>}
|
429
|
-
* @example
|
430
|
-
* imageEditor.rotate(10); // angle = 10
|
431
|
-
* imageEditor.rotate(10); // angle = 20
|
432
|
-
* imageEidtor.rotate(5); // angle = 5
|
433
|
-
* imageEidtor.rotate(-95); // angle = -90
|
434
|
-
* imageEditor.rotate(10).then(status => {
|
435
|
-
* console.log('angle: ', status.angle);
|
436
|
-
* })).catch(message => {
|
437
|
-
* console.log('error: ', message);
|
438
|
-
* });
|
439
|
-
*/
|
440
|
-
rotate(angle: any, isSilent: any): any;
|
441
|
-
/**
|
442
|
-
* Set angle
|
443
|
-
* @param {number} angle - Angle of image
|
444
|
-
* @param {boolean} isSilent - is silent execution or not
|
445
|
-
* @returns {Promise<RotateStatus, ErrorMsg>}
|
446
|
-
* @example
|
447
|
-
* imageEditor.setAngle(10); // angle = 10
|
448
|
-
* imageEditor.rotate(10); // angle = 20
|
449
|
-
* imageEidtor.setAngle(5); // angle = 5
|
450
|
-
* imageEidtor.rotate(50); // angle = 55
|
451
|
-
* imageEidtor.setAngle(-40); // angle = -40
|
452
|
-
* imageEditor.setAngle(10).then(status => {
|
453
|
-
* console.log('angle: ', status.angle);
|
454
|
-
* })).catch(message => {
|
455
|
-
* console.log('error: ', message);
|
456
|
-
* });
|
457
|
-
*/
|
458
|
-
setAngle(angle: any, isSilent: any): any;
|
459
|
-
/**
|
460
|
-
* Set drawing brush
|
461
|
-
* @param {Object} option brush option
|
462
|
-
* @param {Number} option.width width
|
463
|
-
* @param {String} option.color color like 'FFFFFF', 'rgba(0, 0, 0, 0.5)'
|
464
|
-
* @example
|
465
|
-
* imageEditor.startDrawingMode('FREE_DRAWING');
|
466
|
-
* imageEditor.setBrush({
|
467
|
-
* width: 12,
|
468
|
-
* color: 'rgba(0, 0, 0, 0.5)'
|
469
|
-
* });
|
470
|
-
* imageEditor.setBrush({
|
471
|
-
* width: 8,
|
472
|
-
* color: 'FFFFFF'
|
473
|
-
* });
|
474
|
-
*/
|
475
|
-
setBrush(option: any): void;
|
476
|
-
/**
|
477
|
-
* Set states of current drawing shape
|
478
|
-
* @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle')
|
479
|
-
* @param {Object} [options] - Shape options
|
480
|
-
* @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or
|
481
|
-
* Shape foreground color (ex: '#fff', 'transparent')
|
482
|
-
* @param {string} [options.stoke] - Shape outline color
|
483
|
-
* @param {number} [options.strokeWidth] - Shape outline width
|
484
|
-
* @param {number} [options.width] - Width value (When type option is 'rect', this options can use)
|
485
|
-
* @param {number} [options.height] - Height value (When type option is 'rect', this options can use)
|
486
|
-
* @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)
|
487
|
-
* @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)
|
488
|
-
* @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not
|
489
|
-
* @example
|
490
|
-
* imageEditor.setDrawingShape('rect', {
|
491
|
-
* fill: 'red',
|
492
|
-
* width: 100,
|
493
|
-
* height: 200
|
494
|
-
* });
|
495
|
-
* @example
|
496
|
-
* imageEditor.setDrawingShape('circle', {
|
497
|
-
* fill: 'transparent',
|
498
|
-
* stroke: 'blue',
|
499
|
-
* strokeWidth: 3,
|
500
|
-
* rx: 10,
|
501
|
-
* ry: 100
|
502
|
-
* });
|
503
|
-
* @example
|
504
|
-
* imageEditor.setDrawingShape('triangle', { // When resizing, the shape keep the 1:1 ratio
|
505
|
-
* width: 1,
|
506
|
-
* height: 1,
|
507
|
-
* isRegular: true
|
508
|
-
* });
|
509
|
-
* @example
|
510
|
-
* imageEditor.setDrawingShape('circle', { // When resizing, the shape keep the 1:1 ratio
|
511
|
-
* rx: 10,
|
512
|
-
* ry: 10,
|
513
|
-
* isRegular: true
|
514
|
-
* });
|
515
|
-
*/
|
516
|
-
setDrawingShape(type: any, options: any): void;
|
517
|
-
/**
|
518
|
-
* Add shape
|
519
|
-
* @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle')
|
520
|
-
* @param {Object} options - Shape options
|
521
|
-
* @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or
|
522
|
-
* Shape foreground color (ex: '#fff', 'transparent')
|
523
|
-
* @param {string} [options.stroke] - Shape outline color
|
524
|
-
* @param {number} [options.strokeWidth] - Shape outline width
|
525
|
-
* @param {number} [options.width] - Width value (When type option is 'rect', this options can use)
|
526
|
-
* @param {number} [options.height] - Height value (When type option is 'rect', this options can use)
|
527
|
-
* @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)
|
528
|
-
* @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)
|
529
|
-
* @param {number} [options.left] - Shape x position
|
530
|
-
* @param {number} [options.top] - Shape y position
|
531
|
-
* @param {boolean} [options.isRegular] - Whether resizing shape has 1:1 ratio or not
|
532
|
-
* @returns {Promise<ObjectProps, ErrorMsg>}
|
533
|
-
* @example
|
534
|
-
* imageEditor.addShape('rect', {
|
535
|
-
* fill: 'red',
|
536
|
-
* stroke: 'blue',
|
537
|
-
* strokeWidth: 3,
|
538
|
-
* width: 100,
|
539
|
-
* height: 200,
|
540
|
-
* left: 10,
|
541
|
-
* top: 10,
|
542
|
-
* isRegular: true
|
543
|
-
* });
|
544
|
-
* @example
|
545
|
-
* imageEditor.addShape('circle', {
|
546
|
-
* fill: 'red',
|
547
|
-
* stroke: 'blue',
|
548
|
-
* strokeWidth: 3,
|
549
|
-
* rx: 10,
|
550
|
-
* ry: 100,
|
551
|
-
* isRegular: false
|
552
|
-
* }).then(objectProps => {
|
553
|
-
* console.log(objectProps.id);
|
554
|
-
* });
|
555
|
-
* @example
|
556
|
-
* imageEditor.addShape('rect', {
|
557
|
-
* fill: {
|
558
|
-
* type: 'filter',
|
559
|
-
* filter: [{blur: 0.3}, {pixelate: 20}]
|
560
|
-
* },
|
561
|
-
* stroke: 'blue',
|
562
|
-
* strokeWidth: 3,
|
563
|
-
* rx: 10,
|
564
|
-
* ry: 100,
|
565
|
-
* isRegular: false
|
566
|
-
* }).then(objectProps => {
|
567
|
-
* console.log(objectProps.id);
|
568
|
-
* });
|
569
|
-
*/
|
570
|
-
addShape(type: any, options: any): any;
|
571
|
-
/**
|
572
|
-
* Change shape
|
573
|
-
* @param {number} id - object id
|
574
|
-
* @param {Object} options - Shape options
|
575
|
-
* @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or
|
576
|
-
* Shape foreground color (ex: '#fff', 'transparent')
|
577
|
-
* @param {string} [options.stroke] - Shape outline color
|
578
|
-
* @param {number} [options.strokeWidth] - Shape outline width
|
579
|
-
* @param {number} [options.width] - Width value (When type option is 'rect', this options can use)
|
580
|
-
* @param {number} [options.height] - Height value (When type option is 'rect', this options can use)
|
581
|
-
* @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)
|
582
|
-
* @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)
|
583
|
-
* @param {boolean} [options.isRegular] - Whether resizing shape has 1:1 ratio or not
|
584
|
-
* @param {boolean} isSilent - is silent execution or not
|
585
|
-
* @returns {Promise}
|
586
|
-
* @example
|
587
|
-
* // call after selecting shape object on canvas
|
588
|
-
* imageEditor.changeShape(id, { // change rectagle or triangle
|
589
|
-
* fill: 'red',
|
590
|
-
* stroke: 'blue',
|
591
|
-
* strokeWidth: 3,
|
592
|
-
* width: 100,
|
593
|
-
* height: 200
|
594
|
-
* });
|
595
|
-
* @example
|
596
|
-
* // call after selecting shape object on canvas
|
597
|
-
* imageEditor.changeShape(id, { // change circle
|
598
|
-
* fill: 'red',
|
599
|
-
* stroke: 'blue',
|
600
|
-
* strokeWidth: 3,
|
601
|
-
* rx: 10,
|
602
|
-
* ry: 100
|
603
|
-
* });
|
604
|
-
*/
|
605
|
-
changeShape(id: any, options: any, isSilent: any): any;
|
606
|
-
/**
|
607
|
-
* Add text on image
|
608
|
-
* @param {string} text - Initial input text
|
609
|
-
* @param {Object} [options] Options for generating text
|
610
|
-
* @param {Object} [options.styles] Initial styles
|
611
|
-
* @param {string} [options.styles.fill] Color
|
612
|
-
* @param {string} [options.styles.fontFamily] Font type for text
|
613
|
-
* @param {number} [options.styles.fontSize] Size
|
614
|
-
* @param {string} [options.styles.fontStyle] Type of inclination (normal / italic)
|
615
|
-
* @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold)
|
616
|
-
* @param {string} [options.styles.textAlign] Type of text align (left / center / right)
|
617
|
-
* @param {string} [options.styles.textDecoration] Type of line (underline / line-through / overline)
|
618
|
-
* @param {{x: number, y: number}} [options.position] - Initial position
|
619
|
-
* @param {boolean} [options.autofocus] - text autofocus, default is true
|
620
|
-
* @returns {Promise}
|
621
|
-
* @example
|
622
|
-
* imageEditor.addText('init text');
|
623
|
-
* @example
|
624
|
-
* imageEditor.addText('init text', {
|
625
|
-
* styles: {
|
626
|
-
* fill: '#000',
|
627
|
-
* fontSize: 20,
|
628
|
-
* fontWeight: 'bold'
|
629
|
-
* },
|
630
|
-
* position: {
|
631
|
-
* x: 10,
|
632
|
-
* y: 10
|
633
|
-
* }
|
634
|
-
* }).then(objectProps => {
|
635
|
-
* console.log(objectProps.id);
|
636
|
-
* });
|
637
|
-
*/
|
638
|
-
addText(text: any, options: any): any;
|
639
|
-
/**
|
640
|
-
* Change contents of selected text object on image
|
641
|
-
* @param {number} id - object id
|
642
|
-
* @param {string} text - Changing text
|
643
|
-
* @returns {Promise<ObjectProps, ErrorMsg>}
|
644
|
-
* @example
|
645
|
-
* imageEditor.changeText(id, 'change text');
|
646
|
-
*/
|
647
|
-
changeText(id: any, text: any): any;
|
648
|
-
/**
|
649
|
-
* Set style
|
650
|
-
* @param {number} id - object id
|
651
|
-
* @param {Object} styleObj - text styles
|
652
|
-
* @param {string} [styleObj.fill] Color
|
653
|
-
* @param {string} [styleObj.fontFamily] Font type for text
|
654
|
-
* @param {number} [styleObj.fontSize] Size
|
655
|
-
* @param {string} [styleObj.fontStyle] Type of inclination (normal / italic)
|
656
|
-
* @param {string} [styleObj.fontWeight] Type of thicker or thinner looking (normal / bold)
|
657
|
-
* @param {string} [styleObj.textAlign] Type of text align (left / center / right)
|
658
|
-
* @param {string} [styleObj.textDecoration] Type of line (underline / line-through / overline)
|
659
|
-
* @param {boolean} isSilent - is silent execution or not
|
660
|
-
* @returns {Promise}
|
661
|
-
* @example
|
662
|
-
* imageEditor.changeTextStyle(id, {
|
663
|
-
* fontStyle: 'italic'
|
664
|
-
* });
|
665
|
-
*/
|
666
|
-
changeTextStyle(id: any, styleObj: any, isSilent: any): any;
|
667
|
-
/**
|
668
|
-
* change text mode
|
669
|
-
* @param {string} type - change type
|
670
|
-
* @private
|
671
|
-
*/
|
672
|
-
_changeActivateMode(type: any): void;
|
673
|
-
/**
|
674
|
-
* 'textChanged' event handler
|
675
|
-
* @param {Object} objectProps changed object properties
|
676
|
-
* @private
|
677
|
-
*/
|
678
|
-
_onTextChanged(objectProps: any): void;
|
679
|
-
/**
|
680
|
-
* 'iconCreateResize' event handler
|
681
|
-
* @param {Object} originPointer origin pointer
|
682
|
-
* @param {Number} originPointer.x x position
|
683
|
-
* @param {Number} originPointer.y y position
|
684
|
-
* @private
|
685
|
-
*/
|
686
|
-
_onIconCreateResize(originPointer: any): void;
|
687
|
-
/**
|
688
|
-
* 'iconCreateEnd' event handler
|
689
|
-
* @param {Object} originPointer origin pointer
|
690
|
-
* @param {Number} originPointer.x x position
|
691
|
-
* @param {Number} originPointer.y y position
|
692
|
-
* @private
|
693
|
-
*/
|
694
|
-
_onIconCreateEnd(originPointer: any): void;
|
695
|
-
/**
|
696
|
-
* 'textEditing' event handler
|
697
|
-
* @private
|
698
|
-
*/
|
699
|
-
_onTextEditing(): void;
|
700
|
-
/**
|
701
|
-
* Mousedown event handler in case of 'TEXT' drawing mode
|
702
|
-
* @param {fabric.Event} event - Current mousedown event object
|
703
|
-
* @private
|
704
|
-
*/
|
705
|
-
_onAddText(event: any): void;
|
706
|
-
/**
|
707
|
-
* 'addObject' event handler
|
708
|
-
* @param {Object} objectProps added object properties
|
709
|
-
* @private
|
710
|
-
*/
|
711
|
-
_onAddObject(objectProps: any): void;
|
712
|
-
/**
|
713
|
-
* 'objectAdded' event handler
|
714
|
-
* @param {Object} objectProps added object properties
|
715
|
-
* @private
|
716
|
-
*/
|
717
|
-
_onObjectAdded(objectProps: any): void;
|
718
|
-
/**
|
719
|
-
* 'selectionCleared' event handler
|
720
|
-
* @private
|
721
|
-
*/
|
722
|
-
_selectionCleared(): void;
|
723
|
-
/**
|
724
|
-
* 'selectionCreated' event handler
|
725
|
-
* @param {Object} eventTarget - Fabric object
|
726
|
-
* @private
|
727
|
-
*/
|
728
|
-
_selectionCreated(eventTarget: any): void;
|
729
|
-
/**
|
730
|
-
* Register custom icons
|
731
|
-
* @param {{iconType: string, pathValue: string}} infos - Infos to register icons
|
732
|
-
* @example
|
733
|
-
* imageEditor.registerIcons({
|
734
|
-
* customIcon: 'M 0 0 L 20 20 L 10 10 Z',
|
735
|
-
* customArrow: 'M 60 0 L 120 60 H 90 L 75 45 V 180 H 45 V 45 L 30 60 H 0 Z'
|
736
|
-
* });
|
737
|
-
*/
|
738
|
-
registerIcons(infos: any): void;
|
739
|
-
/**
|
740
|
-
* Change canvas cursor type
|
741
|
-
* @param {string} cursorType - cursor type
|
742
|
-
* @example
|
743
|
-
* imageEditor.changeCursor('crosshair');
|
744
|
-
*/
|
745
|
-
changeCursor(cursorType: any): void;
|
746
|
-
/**
|
747
|
-
* Add icon on canvas
|
748
|
-
* @param {string} type - Icon type ('arrow', 'cancel', custom icon name)
|
749
|
-
* @param {Object} options - Icon options
|
750
|
-
* @param {string} [options.fill] - Icon foreground color
|
751
|
-
* @param {number} [options.left] - Icon x position
|
752
|
-
* @param {number} [options.top] - Icon y position
|
753
|
-
* @returns {Promise<ObjectProps, ErrorMsg>}
|
754
|
-
* @example
|
755
|
-
* imageEditor.addIcon('arrow'); // The position is center on canvas
|
756
|
-
* @example
|
757
|
-
* imageEditor.addIcon('arrow', {
|
758
|
-
* left: 100,
|
759
|
-
* top: 100
|
760
|
-
* }).then(objectProps => {
|
761
|
-
* console.log(objectProps.id);
|
762
|
-
* });
|
763
|
-
*/
|
764
|
-
addIcon(type: any, options: any): any;
|
765
|
-
/**
|
766
|
-
* Change icon color
|
767
|
-
* @param {number} id - object id
|
768
|
-
* @param {string} color - Color for icon
|
769
|
-
* @returns {Promise}
|
770
|
-
* @example
|
771
|
-
* imageEditor.changeIconColor(id, '#000000');
|
772
|
-
*/
|
773
|
-
changeIconColor(id: any, color: any): any;
|
774
|
-
/**
|
775
|
-
* Remove an object or group by id
|
776
|
-
* @param {number} id - object id
|
777
|
-
* @returns {Promise}
|
778
|
-
* @example
|
779
|
-
* imageEditor.removeObject(id);
|
780
|
-
*/
|
781
|
-
removeObject(id: any): any;
|
782
|
-
/**
|
783
|
-
* Whether it has the filter or not
|
784
|
-
* @param {string} type - Filter type
|
785
|
-
* @returns {boolean} true if it has the filter
|
786
|
-
*/
|
787
|
-
hasFilter(type: any): any;
|
788
|
-
/**
|
789
|
-
* Remove filter on canvas image
|
790
|
-
* @param {string} type - Filter type
|
791
|
-
* @returns {Promise<FilterResult, ErrorMsg>}
|
792
|
-
* @example
|
793
|
-
* imageEditor.removeFilter('Grayscale').then(obj => {
|
794
|
-
* console.log('filterType: ', obj.type);
|
795
|
-
* console.log('actType: ', obj.action);
|
796
|
-
* }).catch(message => {
|
797
|
-
* console.log('error: ', message);
|
798
|
-
* });
|
799
|
-
*/
|
800
|
-
removeFilter(type: any): any;
|
801
|
-
/**
|
802
|
-
* Apply filter on canvas image
|
803
|
-
* @param {string} type - Filter type
|
804
|
-
* @param {Object} options - Options to apply filter
|
805
|
-
* @param {number} options.maskObjId - masking image object id
|
806
|
-
* @param {boolean} isSilent - is silent execution or not
|
807
|
-
* @returns {Promise<FilterResult, ErrorMsg>}
|
808
|
-
* @example
|
809
|
-
* imageEditor.applyFilter('Grayscale');
|
810
|
-
* @example
|
811
|
-
* imageEditor.applyFilter('mask', {maskObjId: id}).then(obj => {
|
812
|
-
* console.log('filterType: ', obj.type);
|
813
|
-
* console.log('actType: ', obj.action);
|
814
|
-
* }).catch(message => {
|
815
|
-
* console.log('error: ', message);
|
816
|
-
* });;
|
817
|
-
*/
|
818
|
-
applyFilter(type: any, options: any, isSilent: any): any;
|
819
|
-
/**
|
820
|
-
* Get data url
|
821
|
-
* @param {Object} options - options for toDataURL
|
822
|
-
* @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png"
|
823
|
-
* @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg.
|
824
|
-
* @param {Number} [options.multiplier=1] Multiplier to scale by
|
825
|
-
* @param {Number} [options.left] Cropping left offset. Introduced in fabric v1.2.14
|
826
|
-
* @param {Number} [options.top] Cropping top offset. Introduced in fabric v1.2.14
|
827
|
-
* @param {Number} [options.width] Cropping width. Introduced in fabric v1.2.14
|
828
|
-
* @param {Number} [options.height] Cropping height. Introduced in fabric v1.2.14
|
829
|
-
* @returns {string} A DOMString containing the requested data URI
|
830
|
-
* @example
|
831
|
-
* imgEl.src = imageEditor.toDataURL();
|
832
|
-
*
|
833
|
-
* imageEditor.loadImageFromURL(imageEditor.toDataURL(), 'FilterImage').then(() => {
|
834
|
-
* imageEditor.addImageObject(imgUrl);
|
835
|
-
* });
|
836
|
-
*/
|
837
|
-
toDataURL(options: any): any;
|
838
|
-
/**
|
839
|
-
* Get image name
|
840
|
-
* @returns {string} image name
|
841
|
-
* @example
|
842
|
-
* console.log(imageEditor.getImageName());
|
843
|
-
*/
|
844
|
-
getImageName(): any;
|
845
|
-
/**
|
846
|
-
* Clear undoStack
|
847
|
-
* @example
|
848
|
-
* imageEditor.clearUndoStack();
|
849
|
-
*/
|
850
|
-
clearUndoStack(): void;
|
851
|
-
/**
|
852
|
-
* Clear redoStack
|
853
|
-
* @example
|
854
|
-
* imageEditor.clearRedoStack();
|
855
|
-
*/
|
856
|
-
clearRedoStack(): void;
|
857
|
-
/**
|
858
|
-
* Whehter the undo stack is empty or not
|
859
|
-
* @returns {boolean}
|
860
|
-
* imageEditor.isEmptyUndoStack();
|
861
|
-
*/
|
862
|
-
isEmptyUndoStack(): any;
|
863
|
-
/**
|
864
|
-
* Whehter the redo stack is empty or not
|
865
|
-
* @returns {boolean}
|
866
|
-
* imageEditor.isEmptyRedoStack();
|
867
|
-
*/
|
868
|
-
isEmptyRedoStack(): any;
|
869
|
-
/**
|
870
|
-
* Resize canvas dimension
|
871
|
-
* @param {{width: number, height: number}} dimension - Max width & height
|
872
|
-
* @returns {Promise}
|
873
|
-
*/
|
874
|
-
resizeCanvasDimension(dimension: any): any;
|
875
|
-
/**
|
876
|
-
* Destroy
|
877
|
-
*/
|
878
|
-
destroy(): void;
|
879
|
-
/**
|
880
|
-
* Set position
|
881
|
-
* @param {Object} options - Position options (left or top)
|
882
|
-
* @private
|
883
|
-
*/
|
884
|
-
_setPositions(options: any): void;
|
885
|
-
/**
|
886
|
-
* Set properties of active object
|
887
|
-
* @param {number} id - object id
|
888
|
-
* @param {Object} keyValue - key & value
|
889
|
-
* @returns {Promise}
|
890
|
-
* @example
|
891
|
-
* imageEditor.setObjectProperties(id, {
|
892
|
-
* left:100,
|
893
|
-
* top:100,
|
894
|
-
* width: 200,
|
895
|
-
* height: 200,
|
896
|
-
* opacity: 0.5
|
897
|
-
* });
|
898
|
-
*/
|
899
|
-
setObjectProperties(id: any, keyValue: any): any;
|
900
|
-
/**
|
901
|
-
* Set properties of active object, Do not leave an invoke history.
|
902
|
-
* @param {number} id - object id
|
903
|
-
* @param {Object} keyValue - key & value
|
904
|
-
* @example
|
905
|
-
* imageEditor.setObjectPropertiesQuietly(id, {
|
906
|
-
* left:100,
|
907
|
-
* top:100,
|
908
|
-
* width: 200,
|
909
|
-
* height: 200,
|
910
|
-
* opacity: 0.5
|
911
|
-
* });
|
912
|
-
*/
|
913
|
-
setObjectPropertiesQuietly(id: any, keyValue: any): void;
|
914
|
-
/**
|
915
|
-
* Get properties of active object corresponding key
|
916
|
-
* @param {number} id - object id
|
917
|
-
* @param {Array<string>|ObjectProps|string} keys - property's key
|
918
|
-
* @returns {ObjectProps} properties if id is valid or null
|
919
|
-
* @example
|
920
|
-
* var props = imageEditor.getObjectProperties(id, 'left');
|
921
|
-
* console.log(props);
|
922
|
-
* @example
|
923
|
-
* var props = imageEditor.getObjectProperties(id, ['left', 'top', 'width', 'height']);
|
924
|
-
* console.log(props);
|
925
|
-
* @example
|
926
|
-
* var props = imageEditor.getObjectProperties(id, {
|
927
|
-
* left: null,
|
928
|
-
* top: null,
|
929
|
-
* width: null,
|
930
|
-
* height: null,
|
931
|
-
* opacity: null
|
932
|
-
* });
|
933
|
-
* console.log(props);
|
934
|
-
*/
|
935
|
-
getObjectProperties(id: any, keys: any): any;
|
936
|
-
/**
|
937
|
-
* Get the canvas size
|
938
|
-
* @returns {Object} {{width: number, height: number}} canvas size
|
939
|
-
* @example
|
940
|
-
* var canvasSize = imageEditor.getCanvasSize();
|
941
|
-
* console.log(canvasSize.width);
|
942
|
-
* console.height(canvasSize.height);
|
943
|
-
*/
|
944
|
-
getCanvasSize(): any;
|
945
|
-
/**
|
946
|
-
* Get object position by originX, originY
|
947
|
-
* @param {number} id - object id
|
948
|
-
* @param {string} originX - can be 'left', 'center', 'right'
|
949
|
-
* @param {string} originY - can be 'top', 'center', 'bottom'
|
950
|
-
* @returns {Object} {{x:number, y: number}} position by origin if id is valid, or null
|
951
|
-
* @example
|
952
|
-
* var position = imageEditor.getObjectPosition(id, 'left', 'top');
|
953
|
-
* console.log(position);
|
954
|
-
*/
|
955
|
-
getObjectPosition(id: any, originX: any, originY: any): any;
|
956
|
-
/**
|
957
|
-
* Set object position by originX, originY
|
958
|
-
* @param {number} id - object id
|
959
|
-
* @param {Object} posInfo - position object
|
960
|
-
* @param {number} posInfo.x - x position
|
961
|
-
* @param {number} posInfo.y - y position
|
962
|
-
* @param {string} posInfo.originX - can be 'left', 'center', 'right'
|
963
|
-
* @param {string} posInfo.originY - can be 'top', 'center', 'bottom'
|
964
|
-
* @returns {Promise}
|
965
|
-
* @example
|
966
|
-
* // align the object to 'left', 'top'
|
967
|
-
* imageEditor.setObjectPosition(id, {
|
968
|
-
* x: 0,
|
969
|
-
* y: 0,
|
970
|
-
* originX: 'left',
|
971
|
-
* originY: 'top'
|
972
|
-
* });
|
973
|
-
* @example
|
974
|
-
* // align the object to 'right', 'top'
|
975
|
-
* var canvasSize = imageEditor.getCanvasSize();
|
976
|
-
* imageEditor.setObjectPosition(id, {
|
977
|
-
* x: canvasSize.width,
|
978
|
-
* y: 0,
|
979
|
-
* originX: 'right',
|
980
|
-
* originY: 'top'
|
981
|
-
* });
|
982
|
-
* @example
|
983
|
-
* // align the object to 'left', 'bottom'
|
984
|
-
* var canvasSize = imageEditor.getCanvasSize();
|
985
|
-
* imageEditor.setObjectPosition(id, {
|
986
|
-
* x: 0,
|
987
|
-
* y: canvasSize.height,
|
988
|
-
* originX: 'left',
|
989
|
-
* originY: 'bottom'
|
990
|
-
* });
|
991
|
-
* @example
|
992
|
-
* // align the object to 'right', 'bottom'
|
993
|
-
* var canvasSize = imageEditor.getCanvasSize();
|
994
|
-
* imageEditor.setObjectPosition(id, {
|
995
|
-
* x: canvasSize.width,
|
996
|
-
* y: canvasSize.height,
|
997
|
-
* originX: 'right',
|
998
|
-
* originY: 'bottom'
|
999
|
-
* });
|
1000
|
-
*/
|
1001
|
-
setObjectPosition(id: any, posInfo: any): any;
|
1002
|
-
}
|
1003
|
-
export default ImageEditor;
|