@scaleflex/widget-image-editor 4.0.7 → 4.1.0
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 +7668 -7656
- package/LICENSE +0 -0
- package/README.md +106 -106
- package/dist/style.css +10 -5
- package/lib/style.scss +30 -30
- package/package.json +5 -5
package/LICENSE
CHANGED
|
File without changes
|
package/README.md
CHANGED
|
@@ -1,106 +1,106 @@
|
|
|
1
|
-
# `@scaleflex/widget-image-editor`
|
|
2
|
-
|
|
3
|
-
[![Plugins][plugins-image]](#plugins)
|
|
4
|
-
[![Website][filerobot-image]][sfx-url]
|
|
5
|
-
[![Version][filerobot-version]][version-url]
|
|
6
|
-
[![Scaleflex team][made-by-image]][sfx-url]
|
|
7
|
-
[![License][license-image]][license-url]
|
|
8
|
-
[![CodeSandbox][codeSandbox-image]][codeSandbox-url]
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<div align='center'>
|
|
12
|
-
<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://assets.scaleflex.com/Corporate+Branding/%5B2025%5D+ALL+LOGOS+%2B+ICONS/SCALEFLEX/VXP+logo/Horizontal+White/VXP+logo+WHITE.png?vh=663932" width="140"/>
|
|
13
|
-
</div>
|
|
14
|
-
|
|
15
|
-
The image editor plugin provides different functionality for editing the image available in [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core), gives you the possibility to add watermark, text, shapes, edit image by filters, orientations...etc.
|
|
16
|
-
|
|
17
|
-
It is required in case you need to have edit image, variants, exporting functionalities.
|
|
18
|
-
|
|
19
|
-
## Usage
|
|
20
|
-
|
|
21
|
-
### NPM
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npm install --save @scaleflex/widget-image-editor
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
### Yarn
|
|
28
|
-
|
|
29
|
-
```bash
|
|
30
|
-
yarn add @scaleflex/widget-image-editor
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
then
|
|
34
|
-
|
|
35
|
-
```js
|
|
36
|
-
import ImageEditor from '@scaleflex/widget-image-editor'
|
|
37
|
-
...
|
|
38
|
-
...
|
|
39
|
-
...
|
|
40
|
-
scaleflexWidget.use(ImageEditor, propertiesObject)
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
### CDN
|
|
44
|
-
|
|
45
|
-
The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.ImageEditor`
|
|
46
|
-
|
|
47
|
-
```js
|
|
48
|
-
const ImageEditor = window.ScaleflexWidget.ImageEditor
|
|
49
|
-
...
|
|
50
|
-
...
|
|
51
|
-
...
|
|
52
|
-
scaleflexWidget.use(ImageEditor, propertiesObject)
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
### Plugin's styles
|
|
56
|
-
|
|
57
|
-
```js
|
|
58
|
-
import '@scaleflex/widget-core/dist/style.css'
|
|
59
|
-
import '@scaleflex/widget-image-editor/dist/style.css'
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
or if you prefer the minified version
|
|
63
|
-
|
|
64
|
-
```js
|
|
65
|
-
import '@scaleflex/widget-core/dist/style.min.css'
|
|
66
|
-
import '@scaleflex/widget-image-editor/dist/style.min.css'
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
> The plugin's css file should be imported after the [Core's css file](../core/#modules-styles) for having the styles shown correctly.
|
|
70
|
-
|
|
71
|
-
## Properties
|
|
72
|
-
|
|
73
|
-
### `locale`
|
|
74
|
-
|
|
75
|
-
<u>Type:</u> `object`.
|
|
76
|
-
|
|
77
|
-
<u>Default:</u> default locales inside `lib/defaultLocale.js`.
|
|
78
|
-
|
|
79
|
-
Customizing some of the translations or the language's strings and replace the default locale.
|
|
80
|
-
|
|
81
|
-
### `forceOpenOnImgAddedToUpload`
|
|
82
|
-
|
|
83
|
-
<u>Type:</u> `boolean`.
|
|
84
|
-
|
|
85
|
-
<u>Default:</u> `false`
|
|
86
|
-
|
|
87
|
-
Automatically open the image editor on adding a single image in upload panel. (Note: Upload panel must contain only 1 image).
|
|
88
|
-
|
|
89
|
-
Check the rest of the options available on [**filerobot-image-editor**](https://github.com/scaleflex/filerobot-image-editor#readme)
|
|
90
|
-
|
|
91
|
-
> Note: `filerobot` object property, would be overridden internally with your `container` property & SASS key generated through `securityTemplateId` property that are provided in [@scaleflex/widget-core](../core) and cloudimage.token property's value would be the same as `container` unless you provided another value.
|
|
92
|
-
|
|
93
|
-
<!-- Variables -->
|
|
94
|
-
|
|
95
|
-
[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-image-editor
|
|
96
|
-
[license-url]: https://opensource.org/licenses/MIT
|
|
97
|
-
[sfx-url]: https://www.scaleflex.com/
|
|
98
|
-
[version-url]: https://www.npmjs.com/package/@scaleflex/widget-image-editor
|
|
99
|
-
[codeSandbox-url]: https://codesandbox.io/p/sandbox/scalelfex-widget-v4-sandbox-dtp6l3?file=%2Fsrc%2Findex.js
|
|
100
|
-
|
|
101
|
-
[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
|
|
102
|
-
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
|
|
103
|
-
[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
|
|
104
|
-
[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
|
|
105
|
-
[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
|
|
106
|
-
[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-image-editor?label=Version&style=for-the-badge&logo=npm
|
|
1
|
+
# `@scaleflex/widget-image-editor`
|
|
2
|
+
|
|
3
|
+
[![Plugins][plugins-image]](#plugins)
|
|
4
|
+
[![Website][filerobot-image]][sfx-url]
|
|
5
|
+
[![Version][filerobot-version]][version-url]
|
|
6
|
+
[![Scaleflex team][made-by-image]][sfx-url]
|
|
7
|
+
[![License][license-image]][license-url]
|
|
8
|
+
[![CodeSandbox][codeSandbox-image]][codeSandbox-url]
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
<div align='center'>
|
|
12
|
+
<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://assets.scaleflex.com/Corporate+Branding/%5B2025%5D+ALL+LOGOS+%2B+ICONS/SCALEFLEX/VXP+logo/Horizontal+White/VXP+logo+WHITE.png?vh=663932" width="140"/>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
The image editor plugin provides different functionality for editing the image available in [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core), gives you the possibility to add watermark, text, shapes, edit image by filters, orientations...etc.
|
|
16
|
+
|
|
17
|
+
It is required in case you need to have edit image, variants, exporting functionalities.
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
### NPM
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install --save @scaleflex/widget-image-editor
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Yarn
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
yarn add @scaleflex/widget-image-editor
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
then
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
import ImageEditor from '@scaleflex/widget-image-editor'
|
|
37
|
+
...
|
|
38
|
+
...
|
|
39
|
+
...
|
|
40
|
+
scaleflexWidget.use(ImageEditor, propertiesObject)
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### CDN
|
|
44
|
+
|
|
45
|
+
The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.ImageEditor`
|
|
46
|
+
|
|
47
|
+
```js
|
|
48
|
+
const ImageEditor = window.ScaleflexWidget.ImageEditor
|
|
49
|
+
...
|
|
50
|
+
...
|
|
51
|
+
...
|
|
52
|
+
scaleflexWidget.use(ImageEditor, propertiesObject)
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Plugin's styles
|
|
56
|
+
|
|
57
|
+
```js
|
|
58
|
+
import '@scaleflex/widget-core/dist/style.css'
|
|
59
|
+
import '@scaleflex/widget-image-editor/dist/style.css'
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
or if you prefer the minified version
|
|
63
|
+
|
|
64
|
+
```js
|
|
65
|
+
import '@scaleflex/widget-core/dist/style.min.css'
|
|
66
|
+
import '@scaleflex/widget-image-editor/dist/style.min.css'
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
> The plugin's css file should be imported after the [Core's css file](../core/#modules-styles) for having the styles shown correctly.
|
|
70
|
+
|
|
71
|
+
## Properties
|
|
72
|
+
|
|
73
|
+
### `locale`
|
|
74
|
+
|
|
75
|
+
<u>Type:</u> `object`.
|
|
76
|
+
|
|
77
|
+
<u>Default:</u> default locales inside `lib/defaultLocale.js`.
|
|
78
|
+
|
|
79
|
+
Customizing some of the translations or the language's strings and replace the default locale.
|
|
80
|
+
|
|
81
|
+
### `forceOpenOnImgAddedToUpload`
|
|
82
|
+
|
|
83
|
+
<u>Type:</u> `boolean`.
|
|
84
|
+
|
|
85
|
+
<u>Default:</u> `false`
|
|
86
|
+
|
|
87
|
+
Automatically open the image editor on adding a single image in upload panel. (Note: Upload panel must contain only 1 image).
|
|
88
|
+
|
|
89
|
+
Check the rest of the options available on [**filerobot-image-editor**](https://github.com/scaleflex/filerobot-image-editor#readme)
|
|
90
|
+
|
|
91
|
+
> Note: `filerobot` object property, would be overridden internally with your `container` property & SASS key generated through `securityTemplateId` property that are provided in [@scaleflex/widget-core](../core) and cloudimage.token property's value would be the same as `container` unless you provided another value.
|
|
92
|
+
|
|
93
|
+
<!-- Variables -->
|
|
94
|
+
|
|
95
|
+
[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-image-editor
|
|
96
|
+
[license-url]: https://opensource.org/licenses/MIT
|
|
97
|
+
[sfx-url]: https://www.scaleflex.com/
|
|
98
|
+
[version-url]: https://www.npmjs.com/package/@scaleflex/widget-image-editor
|
|
99
|
+
[codeSandbox-url]: https://codesandbox.io/p/sandbox/scalelfex-widget-v4-sandbox-dtp6l3?file=%2Fsrc%2Findex.js
|
|
100
|
+
|
|
101
|
+
[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
|
|
102
|
+
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
|
|
103
|
+
[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
|
|
104
|
+
[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
|
|
105
|
+
[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
|
|
106
|
+
[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-image-editor?label=Version&style=for-the-badge&logo=npm
|
package/dist/style.css
CHANGED
|
@@ -1,22 +1,27 @@
|
|
|
1
1
|
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
|
|
2
2
|
.filerobot-ImageEditor-SaveAsModal-fieldGroup {
|
|
3
3
|
text-align: left;
|
|
4
|
-
margin-bottom: 12px;
|
|
4
|
+
margin-bottom: 12px;
|
|
5
|
+
}
|
|
5
6
|
|
|
6
7
|
.filerobot-ImageEditor-SaveAsModal-fieldInput {
|
|
7
8
|
margin-top: 4px;
|
|
8
|
-
height: 32px;
|
|
9
|
+
height: 32px;
|
|
10
|
+
}
|
|
9
11
|
|
|
10
12
|
.filerobot-ImageEditor-SaveAsModal-folderFieldGroup {
|
|
11
13
|
display: flex;
|
|
12
14
|
justify-content: flex-start;
|
|
13
|
-
align-items: center;
|
|
15
|
+
align-items: center;
|
|
16
|
+
}
|
|
14
17
|
|
|
15
18
|
.filerobot-ImageEditor-SaveAsModal-folderPathInput {
|
|
16
19
|
flex-grow: 1;
|
|
17
20
|
border-radius: 2px 0 0 2px;
|
|
18
|
-
height: 100%;
|
|
21
|
+
height: 100%;
|
|
22
|
+
}
|
|
19
23
|
|
|
20
24
|
.filerobot-ImageEditor-SaveAsModal-browseButton {
|
|
21
25
|
background: #E9EEF2;
|
|
22
|
-
border-radius: 0 2px 2px 0;
|
|
26
|
+
border-radius: 0 2px 2px 0;
|
|
27
|
+
}
|
package/lib/style.scss
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
// packages/@scaleflex/widget-image-editor/src/components/SaveAsModalContent.jsx
|
|
2
|
-
@import '@scaleflex/widget-core/lib/_variables.scss';
|
|
3
|
-
|
|
4
|
-
.filerobot-ImageEditor-SaveAsModal-fieldGroup {
|
|
5
|
-
text-align: left;
|
|
6
|
-
margin-bottom: 12px;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.filerobot-ImageEditor-SaveAsModal-fieldInput {
|
|
10
|
-
margin-top: 4px;
|
|
11
|
-
height: 32px;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.filerobot-ImageEditor-SaveAsModal-folderFieldGroup {
|
|
15
|
-
display: flex;
|
|
16
|
-
justify-content: flex-start;
|
|
17
|
-
align-items: center;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.filerobot-ImageEditor-SaveAsModal-folderPathInput {
|
|
21
|
-
flex-grow: 1;
|
|
22
|
-
border-radius: 2px 0 0 2px;
|
|
23
|
-
height: 100%;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.filerobot-ImageEditor-SaveAsModal-browseButton {
|
|
27
|
-
background: $active-secondary;
|
|
28
|
-
border-radius: 0 2px 2px 0;
|
|
29
|
-
|
|
30
|
-
}
|
|
1
|
+
// packages/@scaleflex/widget-image-editor/src/components/SaveAsModalContent.jsx
|
|
2
|
+
@import '@scaleflex/widget-core/lib/_variables.scss';
|
|
3
|
+
|
|
4
|
+
.filerobot-ImageEditor-SaveAsModal-fieldGroup {
|
|
5
|
+
text-align: left;
|
|
6
|
+
margin-bottom: 12px;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.filerobot-ImageEditor-SaveAsModal-fieldInput {
|
|
10
|
+
margin-top: 4px;
|
|
11
|
+
height: 32px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.filerobot-ImageEditor-SaveAsModal-folderFieldGroup {
|
|
15
|
+
display: flex;
|
|
16
|
+
justify-content: flex-start;
|
|
17
|
+
align-items: center;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.filerobot-ImageEditor-SaveAsModal-folderPathInput {
|
|
21
|
+
flex-grow: 1;
|
|
22
|
+
border-radius: 2px 0 0 2px;
|
|
23
|
+
height: 100%;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.filerobot-ImageEditor-SaveAsModal-browseButton {
|
|
27
|
+
background: $active-secondary;
|
|
28
|
+
border-radius: 0 2px 2px 0;
|
|
29
|
+
|
|
30
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@scaleflex/widget-image-editor",
|
|
3
|
-
"version": "4.0
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"description": "FilerobotImageEditor integration with Scaleflex",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@scaleflex/icons": "^3.0.0-beta.11",
|
|
17
17
|
"@scaleflex/ui": "^3.0.0-beta.11",
|
|
18
|
-
"@scaleflex/widget-common": "^4.0
|
|
19
|
-
"@scaleflex/widget-icons": "^4.0
|
|
20
|
-
"@scaleflex/widget-utils": "^4.0
|
|
18
|
+
"@scaleflex/widget-common": "^4.1.0",
|
|
19
|
+
"@scaleflex/widget-icons": "^4.1.0",
|
|
20
|
+
"@scaleflex/widget-utils": "^4.1.0",
|
|
21
21
|
"react-filerobot-image-editor": "5.0.0-beta.93",
|
|
22
22
|
"react-filerobot-video-editor": "1.1.3"
|
|
23
23
|
},
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"react-konva": ">=19.0.3",
|
|
36
36
|
"react-redux": "^8.1.1"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "471120d67066617a0d8824eae11b07d1f2259473"
|
|
39
39
|
}
|