@scaleflex/widget-image-editor 4.0.6 → 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.
Files changed (6) hide show
  1. package/CHANGELOG.md +7658 -7633
  2. package/LICENSE +0 -0
  3. package/README.md +106 -106
  4. package/dist/style.css +10 -5
  5. package/lib/style.scss +30 -30
  6. 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.6",
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.6",
19
- "@scaleflex/widget-icons": "^4.0.6",
20
- "@scaleflex/widget-utils": "^4.0.6",
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": "17ad9b9abc2add9c8b52ab56e3a72108bee20a7a"
38
+ "gitHead": "471120d67066617a0d8824eae11b07d1f2259473"
39
39
  }