openlayers-style-editor 0.1.3 → 0.1.5

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/README.md CHANGED
@@ -1,148 +1,151 @@
1
- <p align="center"><img src="https://land-it.github.io/openlayers-style-editor/favicons/android-chrome-192x192.png"></p>
2
- <h1 align="center">Welcome to <code>openlayers-style-editor</code></h1>
3
-
4
- ![](https://img.shields.io/npm/v/openlayers-style-editor.svg)
5
- ![](https://img.shields.io/npm/dw/openlayers-style-editor)
6
- ![](https://img.shields.io/npm/dt/openlayers-style-editor)
7
- ![](https://img.shields.io/github/stars/land-it/openlayers-style-editor)
8
- ![](https://img.shields.io/github/commit-activity/m/land-it/openlayers-style-editor)
9
- ![](https://img.shields.io/github/v/release/land-it/openlayers-style-editor)
10
-
11
- ![](https://img.shields.io/badge/documentation-yes-brightgreen.svg)
12
- ![](https://img.shields.io/github/issues/land-it/openlayers-style-editor)
13
- ![](https://img.shields.io/github/issues-closed/land-it/openlayers-style-editor)
14
- ![](https://img.shields.io/github/contributors/land-it/openlayers-style-editor)
15
-
16
-
17
- ### ✨ [Demo](https://land-it.github.io/openlayers-style-editor/#/demo)
18
-
19
- ## Contents
20
-
21
- - [Background](#background)
22
- - [Presentation](#presentation)
23
- - [Installation](#installation)
24
- - [Usage](#usage)
25
- - [Props Details](#props-details)
26
- - [TODOs](#todos)
27
- - [Show your support](#show-your-support)
28
- - [Author & Maintainer](#author--maintainer)
29
-
30
- ## Background
31
-
32
- This package was created in the context of the [LAND IT](https://land-it.github.io/) project,
33
- a decision support system to help stakeholders planning a new
34
- landscape for the most affected areas by wildfires in Portugal.
35
- LAND IT uses OpenLayers as its main GIS dependency,
36
- and throughout the project the need to edit layers styles increased.
37
-
38
- ## Presentation
39
-
40
- This Style Editor for OpenLayers allows the user to change the style of layers. This editor was inspired in both QGIS and ArcMap editors.
41
-
42
- **There are three edition modes:**
43
-
44
- - **Unique Symbol:** Allows the user to change the layer's color, opacity, and stroke.
45
- - **Categorized:** Allows the user to change the layer's color, opacity, and stroke based on the values of an attribute.
46
- - **Graduated:** Allows the user to change the layer's color, opacity, and stroke based on a numeric attribute and the
47
- mode used to group its values. This package has six modes implemented, some of them are implemented using the
48
- [GeoBuckets](https://www.npmjs.com/package/geobuckets) package. The implemented modes are:
49
- - Manual
50
- - Equal Intervals
51
- - Defined Intervals
52
- - Quantile
53
- - Natural Breaks (Jenks)
54
- - Standard Deviation
55
-
56
- A detailed explanation of each mode can be found [here](https://resources.arcgis.com/en/help/main/10.2/index.html#//00s50000001r000000).
57
-
58
- ## Installation
59
-
60
- Depending on the installed package provider, this package can be installed with one of the following commands.
61
-
62
- ```
63
- npm install openlayers-style-editor
64
- ```
65
-
66
- ```
67
- yarn add openlayers-style-editor
68
- ```
69
-
70
- ## Usage
71
-
72
- Firstly it is necessary to import the styles of the package. This can be done by adding the following code snippet to your index/main file.
73
-
74
- ```tsx
75
- import 'openlayers-style-editor/dist/openlayers-style-editor.css';
76
- ```
77
-
78
- It is possible to enjoy this package by adding the following code snippets to your code.
79
-
80
- ```tsx
81
- import { Render, RenderType, StyleEditor } from "openlayers-style-editor";
82
- ```
83
-
84
-
85
- ```tsx
86
- const [visible, setVisible] = useState<boolean>(false);
87
-
88
- const defaultRender: Render = {
89
- type: RenderType.Unique,
90
- rendererOL: {
91
- 'fill-color': [255, 255, 50, 1],
92
- 'stroke-color': [0, 0, 0, 1],
93
- 'stroke-width': 1,
94
- }
95
- }
96
-
97
- const [renderer, setRenderer] = useState<Render>(defaultRender);
98
- ```
99
-
100
- ```tsx
101
- <StyleEditor visible={visible}
102
- setVisible={setVisible}
103
- layerDefaultRenderer={defaultRender}
104
- layerCurrentRenderer={renderer}
105
- applyRenderer={(renderer) => setRenderer(renderer)}
106
- features={features}
107
- primeReactTheme={"bootstrap4-light-blue"}
108
- showPreDefinedRamps={true} />
109
- ```
110
-
111
- ***To see a full example click [here](https://github.com/LAND-IT/openlayers-style-editor/blob/master/page/src/examples/Test.tsx).***
112
-
113
- ## Props Details
114
-
115
- | Name | Type | Requirement | Description | Example |
116
- |-------------------------|------------------------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
117
- | `visible` | `boolean` | **mandatory** | Defines if the component<br/> is visible or not | true |
118
- | `setVisible` | `function` | **mandatory** | Function to set the <br/>visibility of the component | () => setVisible(!visible) |
119
- | `layerDefaultRenderer` | `Render` | **mandatory** | Default renderer of <br/>the layer to be edited | {<br/>&emsp;type: RenderType.Unique, <br/>&emsp;rendererOL: { <br/>&emsp;&emsp;'fill-color': [255, 255, 50, 1], <br/>&emsp;&emsp;'stroke-color': [0, 0, 0, 1], <br/>&emsp;&emsp;'stroke-width': 1<br/>&emsp;}<br/>} |
120
- | `layerCurrentRenderer ` | `Render` | **mandatory** | Current renderer of the layer | {<br/>&emsp;type: RenderType.Unique, <br/>&emsp;rendererOL: { <br/>&emsp;&emsp;'fill-color': [255, 255, 50, 1], <br/>&emsp;&emsp;'stroke-color': [0, 0, 0, 1], <br/>&emsp;&emsp;'stroke-width': 1<br/>&emsp;}<br/>} |
121
- | `applyRenderer` | `function` | **mandatory** | Function to apply the renderer to the layer, it has as parameter the renderer to be applied | (renderer: Render) => setRenderer(renderer) |
122
- | `features` | `Feature[]` | **mandatory** | Features to be rendered on the map | |
123
- | `showPreDefinedRamps` | `boolean` | **mandatory** | Show the predefined ramps of the package | true |
124
- | `moreRamps` | `ColorRamp[]` | optional | An array of color ramps that can be added to the package | [{<br/>&emsp;id: 28, //id needs to be >=28 <br/>&emsp;name: "GnBu", <br/>&emsp;palette: <br/>&emsp;&emsp;[{<br/>&emsp;&emsp;&emsp;offset: 0.25, <br/>&emsp;&emsp;&emsp;color: fromString("rgb(186,228,188)")<br/>&emsp;&emsp;},<br/>&emsp;&emsp;{<br/>&emsp;&emsp;&emsp;offset: 0.5,<br/>&emsp;&emsp;&emsp;color: fromString("rgb(123,204,196)")<br/>&emsp;&emsp;}, <br/>&emsp;&emsp;{<br/>&emsp;&emsp;&emsp;offset: 0.75, <br/>&emsp;&emsp;&emsp;color: fromString("rgb(67,162,202)")<br/>&emsp;&emsp;}]<br/>}] |
125
- | `predefinedStyles` | `PredefinedRenderer[]` | optional | Predefined styles to be used on the categorized style type | [{<br/>&emsp;name: "Dangerousness",<br/>&emsp;renderer: <br/>&emsp;&emsp;[{<br/>&emsp;&emsp;&emsp;value: "Very High", <br/>&emsp;&emsp;&emsp;color: [255, 0, 0]<br/>&emsp;&emsp;},<br/>&emsp;&emsp;{<br/>&emsp;&emsp;&emsp;value: "High", <br/>&emsp;&emsp;&emsp;color: [255, 128, 0]<br/>&emsp;&emsp;},<br/>&emsp;&emsp;{<br/>&emsp;&emsp;&emsp;value: "Medium", <br/>&emsp;&emsp;&emsp;color: [255, 255, 0]<br/>&emsp;&emsp;},<br/>&emsp;&emsp;{<br/>&emsp;&emsp;&emsp;value: "Low", <br/>&emsp;&emsp;&emsp;color: [139, 209, 0]<br/>&emsp;&emsp;},<br/>&emsp;&emsp;{<br/>&emsp;&emsp;&emsp;value: "Very Low", <br/>&emsp;&emsp;&emsp;color: [56, 168, 0]<br/>&emsp;&emsp;}]<br/>}] |
126
- | `addingToHeader` | `string` | optional | Text to be added to the header | - Dangerousness Layer |
127
- | `primeReactTheme` | `string` | optional | PrimeReact theme to be used, all option can be found [here](https://primereact.org/theming/#themes) | bootstrap4-light-blue |
128
- | `numbersLocale` | `string` | optional | Locale to be used on numbers, represented using BCP 47 language tag. Default is 'en-US' | en-US |
129
- | `textLocale` | `string` | optional | Locale to be used for text. This package has two options available: 'en' and 'pt'. Default is 'en'. To add a custom locale, use the customLocale prop and in the textLocale prop use 'custom'. | pt |
130
- | `customLocale` | `Record<string, any>` | optional | Custom locale to be used in case the textLocale is set to 'custom'. This prop must have the same structure as the default locale, that can be found [here](https://github.com/LAND-IT/openlayers-style-editor/blob/master/openlayers-style-editor/src/locales/en/translation.json) | {"common": {<br/>&emsp;"style_editor": "Editor de Estilos",<br/>&emsp;"reset_style": "Repor Estilo",<br/>&emsp;...<br/>}} |
131
-
132
- ## TODOs
133
-
134
- - [ ] Add the condition style type
135
- - [ ] Add a license
136
-
137
- ## Show your support
138
-
139
- Give a ⭐️ if this project helped you!
140
-
141
- ## Author & Maintainer
142
-
143
- <img src="https://avatars.githubusercontent.com/u/45342267?v=4" height="80px" style="border-radius:50px" />
144
-
145
- Márcia Matias
146
-
147
- - Github: [@MarciaBM](https://github.com/MarciaBM)
148
- - Personal Page: [marciamatias.github.io](https://marciamatias.github.io/)
1
+ <p align="center"><img src="https://land-it.github.io/openlayers-style-editor/favicons/android-chrome-192x192.png"></p>
2
+ <h1 align="center">Welcome to <code>openlayers-style-editor</code></h1>
3
+
4
+ ![](https://img.shields.io/npm/v/openlayers-style-editor.svg)
5
+ ![](https://img.shields.io/npm/dw/openlayers-style-editor)
6
+ ![](https://img.shields.io/npm/dt/openlayers-style-editor)
7
+ ![](https://img.shields.io/github/stars/land-it/openlayers-style-editor)
8
+ ![](https://img.shields.io/github/commit-activity/m/land-it/openlayers-style-editor)
9
+ ![](https://img.shields.io/github/v/release/land-it/openlayers-style-editor)
10
+
11
+ ![](https://img.shields.io/badge/documentation-yes-brightgreen.svg)
12
+ ![](https://img.shields.io/github/issues/land-it/openlayers-style-editor)
13
+ ![](https://img.shields.io/github/issues-closed/land-it/openlayers-style-editor)
14
+ ![](https://img.shields.io/github/contributors/land-it/openlayers-style-editor)
15
+
16
+
17
+ ### ✨ [Demo](https://land-it.github.io/openlayers-style-editor/#/demo)
18
+
19
+ > [!NOTE]
20
+ > This package is compatible with SSR.
21
+
22
+ ## Contents
23
+
24
+ - [Background](#background)
25
+ - [Presentation](#presentation)
26
+ - [Installation](#installation)
27
+ - [Usage](#usage)
28
+ - [Props Details](#props-details)
29
+ - [TODOs](#todos)
30
+ - [Show your support](#show-your-support)
31
+ - [Author & Maintainer](#author--maintainer)
32
+
33
+ ## Background
34
+
35
+ This package was created in the context of the [LAND IT](https://land-it.github.io/) project,
36
+ a decision support system to help stakeholders planning a new
37
+ landscape for the most affected areas by wildfires in Portugal.
38
+ LAND IT uses OpenLayers as its main GIS dependency,
39
+ and throughout the project the need to edit layers styles increased.
40
+
41
+ ## Presentation
42
+
43
+ This Style Editor for OpenLayers allows the user to change the style of layers. This editor was inspired in both QGIS and ArcMap editors.
44
+
45
+ **There are three edition modes:**
46
+
47
+ - **Unique Symbol:** Allows the user to change the layer's color, opacity, and stroke.
48
+ - **Categorized:** Allows the user to change the layer's color, opacity, and stroke based on the values of an attribute.
49
+ - **Graduated:** Allows the user to change the layer's color, opacity, and stroke based on a numeric attribute and the
50
+ mode used to group its values. This package has six modes implemented, some of them are implemented using the
51
+ [GeoBuckets](https://www.npmjs.com/package/geobuckets) package. The implemented modes are:
52
+ - Manual
53
+ - Equal Intervals
54
+ - Defined Intervals
55
+ - Quantile
56
+ - Natural Breaks (Jenks)
57
+ - Standard Deviation
58
+
59
+ A detailed explanation of each mode can be found [here](https://resources.arcgis.com/en/help/main/10.2/index.html#//00s50000001r000000).
60
+
61
+ ## Installation
62
+
63
+ Depending on the installed package provider, this package can be installed with one of the following commands.
64
+
65
+ ```
66
+ npm install openlayers-style-editor
67
+ ```
68
+
69
+ ```
70
+ yarn add openlayers-style-editor
71
+ ```
72
+
73
+ ## Usage
74
+
75
+ Firstly it is necessary to import the styles of the package. This can be done by adding the following code snippet to your index/main file.
76
+
77
+ ```tsx
78
+ import 'openlayers-style-editor/dist/openlayers-style-editor.css';
79
+ ```
80
+
81
+ It is possible to enjoy this package by adding the following code snippets to your code.
82
+
83
+ ```tsx
84
+ import { Render, RenderType, StyleEditor } from "openlayers-style-editor";
85
+ ```
86
+
87
+
88
+ ```tsx
89
+ const [visible, setVisible] = useState<boolean>(false);
90
+
91
+ const defaultRender: Render = {
92
+ type: RenderType.Unique,
93
+ rendererOL: {
94
+ 'fill-color': [255, 255, 50, 1],
95
+ 'stroke-color': [0, 0, 0, 1],
96
+ 'stroke-width': 1,
97
+ }
98
+ }
99
+
100
+ const [renderer, setRenderer] = useState<Render>(defaultRender);
101
+ ```
102
+
103
+ ```tsx
104
+ <StyleEditor visible={visible}
105
+ setVisible={setVisible}
106
+ layerDefaultRenderer={defaultRender}
107
+ layerCurrentRenderer={renderer}
108
+ applyRenderer={(renderer) => setRenderer(renderer)}
109
+ features={features}
110
+ primeReactTheme={"bootstrap4-light-blue"}
111
+ showPreDefinedRamps={true} />
112
+ ```
113
+
114
+ ***To see a full example click [here](https://github.com/LAND-IT/openlayers-style-editor/blob/master/page/src/examples/Test.tsx).***
115
+
116
+ ## Props Details
117
+
118
+ | Name | Type | Requirement | Description | Example |
119
+ |-------------------------|------------------------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
120
+ | `visible` | `boolean` | **mandatory** | Defines if the component<br/> is visible or not | true |
121
+ | `setVisible` | `function` | **mandatory** | Function to set the <br/>visibility of the component | () => setVisible(!visible) |
122
+ | `layerDefaultRenderer` | `Render` | **mandatory** | Default renderer of <br/>the layer to be edited | {<br/>&emsp;type: RenderType.Unique, <br/>&emsp;rendererOL: { <br/>&emsp;&emsp;'fill-color': [255, 255, 50, 1], <br/>&emsp;&emsp;'stroke-color': [0, 0, 0, 1], <br/>&emsp;&emsp;'stroke-width': 1<br/>&emsp;}<br/>} |
123
+ | `layerCurrentRenderer ` | `Render` | **mandatory** | Current renderer of the layer | {<br/>&emsp;type: RenderType.Unique, <br/>&emsp;rendererOL: { <br/>&emsp;&emsp;'fill-color': [255, 255, 50, 1], <br/>&emsp;&emsp;'stroke-color': [0, 0, 0, 1], <br/>&emsp;&emsp;'stroke-width': 1<br/>&emsp;}<br/>} |
124
+ | `applyRenderer` | `function` | **mandatory** | Function to apply the renderer to the layer, it has as parameter the renderer to be applied | (renderer: Render) => setRenderer(renderer) |
125
+ | `features` | `Feature[]` | **mandatory** | Features to be rendered on the map | |
126
+ | `showPreDefinedRamps` | `boolean` | **mandatory** | Show the predefined ramps of the package | true |
127
+ | `moreRamps` | `ColorRamp[]` | optional | An array of color ramps that can be added to the package | [{<br/>&emsp;id: 28, //id needs to be >=28 <br/>&emsp;name: "GnBu", <br/>&emsp;palette: <br/>&emsp;&emsp;[{<br/>&emsp;&emsp;&emsp;offset: 0.25, <br/>&emsp;&emsp;&emsp;color: fromString("rgb(186,228,188)")<br/>&emsp;&emsp;},<br/>&emsp;&emsp;{<br/>&emsp;&emsp;&emsp;offset: 0.5,<br/>&emsp;&emsp;&emsp;color: fromString("rgb(123,204,196)")<br/>&emsp;&emsp;}, <br/>&emsp;&emsp;{<br/>&emsp;&emsp;&emsp;offset: 0.75, <br/>&emsp;&emsp;&emsp;color: fromString("rgb(67,162,202)")<br/>&emsp;&emsp;}]<br/>}] |
128
+ | `predefinedStyles` | `PredefinedRenderer[]` | optional | Predefined styles to be used on the categorized style type | [{<br/>&emsp;name: "Dangerousness",<br/>&emsp;renderer: <br/>&emsp;&emsp;[{<br/>&emsp;&emsp;&emsp;value: "Very High", <br/>&emsp;&emsp;&emsp;color: [255, 0, 0]<br/>&emsp;&emsp;},<br/>&emsp;&emsp;{<br/>&emsp;&emsp;&emsp;value: "High", <br/>&emsp;&emsp;&emsp;color: [255, 128, 0]<br/>&emsp;&emsp;},<br/>&emsp;&emsp;{<br/>&emsp;&emsp;&emsp;value: "Medium", <br/>&emsp;&emsp;&emsp;color: [255, 255, 0]<br/>&emsp;&emsp;},<br/>&emsp;&emsp;{<br/>&emsp;&emsp;&emsp;value: "Low", <br/>&emsp;&emsp;&emsp;color: [139, 209, 0]<br/>&emsp;&emsp;},<br/>&emsp;&emsp;{<br/>&emsp;&emsp;&emsp;value: "Very Low", <br/>&emsp;&emsp;&emsp;color: [56, 168, 0]<br/>&emsp;&emsp;}]<br/>}] |
129
+ | `addingToHeader` | `string` | optional | Text to be added to the header | - Dangerousness Layer |
130
+ | `primeReactTheme` | `string` | optional | PrimeReact theme to be used, all option can be found [here](https://primereact.org/theming/#themes) | bootstrap4-light-blue |
131
+ | `numbersLocale` | `string` | optional | Locale to be used on numbers, represented using BCP 47 language tag. Default is 'en-US' | en-US |
132
+ | `textLocale` | `string` | optional | Locale to be used for text. This package has two options available: 'en' and 'pt'. Default is 'en'. To add a custom locale, use the customLocale prop and in the textLocale prop use 'custom'. | pt |
133
+ | `customLocale` | `Record<string, any>` | optional | Custom locale to be used in case the textLocale is set to 'custom'. This prop must have the same structure as the default locale, that can be found [here](https://github.com/LAND-IT/openlayers-style-editor/blob/master/openlayers-style-editor/src/locales/en/translation.json) | {"common": {<br/>&emsp;"style_editor": "Editor de Estilos",<br/>&emsp;"reset_style": "Repor Estilo",<br/>&emsp;...<br/>}} |
134
+
135
+ ## TODOs
136
+
137
+ - [ ] Add the condition style type
138
+ - [ ] Add a license
139
+
140
+ ## Show your support
141
+
142
+ Give a ⭐️ if this project helped you!
143
+
144
+ ## Author & Maintainer
145
+
146
+ <img src="https://avatars.githubusercontent.com/u/45342267?v=4" height="80px" style="border-radius:50px" />
147
+
148
+ Márcia Matias
149
+
150
+ - Github: [@MarciaBM](https://github.com/MarciaBM)
151
+ - Personal Page: [marciabm.github.io](https://marciabm.github.io/)
package/dist/index.cjs CHANGED
@@ -120,8 +120,13 @@
120
120
  let aux = renderer.rendererOL["fill-color"];
121
121
  aux = [...aux];
122
122
  aux[3] = opacity / 100;
123
- newRenderer = { ...renderer };
124
- newRenderer.rendererOL["fill-color"] = aux;
123
+ newRenderer = {
124
+ ...renderer,
125
+ rendererOL: {
126
+ ...renderer.rendererOL,
127
+ ["fill-color"]: aux
128
+ }
129
+ };
125
130
  }
126
131
  if (renderer.type == "Categorized") {
127
132
  let aux = renderer.rendererOL["fill-color"].slice(3);
@@ -131,7 +136,6 @@
131
136
  color[3] = opacity / 100;
132
137
  newAux[i] = color;
133
138
  }
134
- console.log(renderer);
135
139
  newRenderer = {
136
140
  ...renderer,
137
141
  rendererOL: {
@@ -139,7 +143,6 @@
139
143
  ["fill-color"]: renderer.rendererOL["fill-color"].slice(0, 3).concat(newAux)
140
144
  }
141
145
  };
142
- console.log(newRenderer);
143
146
  }
144
147
  if (renderer.type == "Graduated") {
145
148
  let aux = renderer.rendererOL["fill-color"].slice(4);
@@ -149,8 +152,13 @@
149
152
  color[3] = opacity / 100;
150
153
  newAux[i] = color;
151
154
  }
152
- newRenderer = { ...renderer };
153
- newRenderer.rendererOL["fill-color"] = renderer.rendererOL["fill-color"].slice(0, 4).concat(newAux);
155
+ newRenderer = {
156
+ ...renderer,
157
+ rendererOL: {
158
+ ...renderer.rendererOL,
159
+ ["fill-color"]: renderer.rendererOL["fill-color"].slice(0, 4).concat(newAux)
160
+ }
161
+ };
154
162
  }
155
163
  return newRenderer;
156
164
  }
package/dist/index.js CHANGED
@@ -134,8 +134,13 @@ function changeRendererOpacity(renderer, opacity) {
134
134
  let aux = renderer.rendererOL["fill-color"];
135
135
  aux = [...aux];
136
136
  aux[3] = opacity / 100;
137
- newRenderer = { ...renderer };
138
- newRenderer.rendererOL["fill-color"] = aux;
137
+ newRenderer = {
138
+ ...renderer,
139
+ rendererOL: {
140
+ ...renderer.rendererOL,
141
+ ["fill-color"]: aux
142
+ }
143
+ };
139
144
  }
140
145
  if (renderer.type == "Categorized") {
141
146
  let aux = renderer.rendererOL["fill-color"].slice(3);
@@ -145,7 +150,6 @@ function changeRendererOpacity(renderer, opacity) {
145
150
  color[3] = opacity / 100;
146
151
  newAux[i] = color;
147
152
  }
148
- console.log(renderer);
149
153
  newRenderer = {
150
154
  ...renderer,
151
155
  rendererOL: {
@@ -153,7 +157,6 @@ function changeRendererOpacity(renderer, opacity) {
153
157
  ["fill-color"]: renderer.rendererOL["fill-color"].slice(0, 3).concat(newAux)
154
158
  }
155
159
  };
156
- console.log(newRenderer);
157
160
  }
158
161
  if (renderer.type == "Graduated") {
159
162
  let aux = renderer.rendererOL["fill-color"].slice(4);
@@ -163,8 +166,13 @@ function changeRendererOpacity(renderer, opacity) {
163
166
  color[3] = opacity / 100;
164
167
  newAux[i] = color;
165
168
  }
166
- newRenderer = { ...renderer };
167
- newRenderer.rendererOL["fill-color"] = renderer.rendererOL["fill-color"].slice(0, 4).concat(newAux);
169
+ newRenderer = {
170
+ ...renderer,
171
+ rendererOL: {
172
+ ...renderer.rendererOL,
173
+ ["fill-color"]: renderer.rendererOL["fill-color"].slice(0, 4).concat(newAux)
174
+ }
175
+ };
168
176
  }
169
177
  return newRenderer;
170
178
  }
package/package.json CHANGED
@@ -1,64 +1,64 @@
1
- {
2
- "name": "openlayers-style-editor",
3
- "version": "0.1.3",
4
- "type": "module",
5
- "description": "A style editor extension for OpenLayers currently working with WebGL Vector Layers",
6
- "homepage": "https://land-it.github.io/openlayers-style-editor/",
7
- "repository": "https://github.com/LAND-IT/openlayers-style-editor",
8
- "keywords": [
9
- "openlayers",
10
- "style",
11
- "editor",
12
- "webgl",
13
- "extension",
14
- "layers"
15
- ],
16
- "author": "Márcia Matias (@MarciaBM)",
17
- "bugs": "https://github.com/LAND-IT/openlayers-style-editor/issues",
18
- "main": "./dist/index.cjs",
19
- "module": "./dist/index.js",
20
- "types": "./dist/index.d.ts",
21
- "style": "./dist/openlayers-style-editor.css",
22
- "files": [
23
- "dist"
24
- ],
25
- "scripts": {
26
- "dev": "vite",
27
- "build": "vite build --config vite.config.ts",
28
- "build2": "tsc && vite build",
29
- "start": "vite --host --open"
30
- },
31
- "peerDependencies": {
32
- "ol": ">= 10.4.0",
33
- "react": ">= 17.0.0",
34
- "react-dom": ">= 17.0.0"
35
- },
36
- "dependencies": {
37
- "chart.js": "4.4.8",
38
- "geobuckets": "0.0.3",
39
- "i18next": "24.2.2",
40
- "primeicons": "7.0.0",
41
- "primereact": "10.9.2",
42
- "react-best-gradient-color-picker": "3.0.14",
43
- "react-i18next": "15.4.1"
44
- },
45
- "devDependencies": {
46
- "@eslint/js": "9.17.0",
47
- "@types/node": "22.13.4",
48
- "@types/react": "18.3.18",
49
- "@types/react-dom": "18.3.5",
50
- "@vitejs/plugin-react": "4.3.4",
51
- "eslint": "8.57.0",
52
- "eslint-plugin-react-hooks": "5.0.0",
53
- "eslint-plugin-react-refresh": "0.4.16",
54
- "globals": "16.0.0",
55
- "typescript": "5.7.3",
56
- "typescript-eslint": "8.22.0",
57
- "vite": "6.2.0",
58
- "vite-plugin-css-injected-by-js": "3.5.2",
59
- "vite-plugin-dts": "4.5.0"
60
- },
61
- "publishConfig": {
62
- "access": "public"
63
- }
64
- }
1
+ {
2
+ "name": "openlayers-style-editor",
3
+ "version": "0.1.5",
4
+ "type": "module",
5
+ "description": "A style editor extension for OpenLayers currently working with WebGL Vector Layers",
6
+ "homepage": "https://land-it.github.io/openlayers-style-editor/",
7
+ "repository": "https://github.com/LAND-IT/openlayers-style-editor",
8
+ "keywords": [
9
+ "openlayers",
10
+ "style",
11
+ "editor",
12
+ "webgl",
13
+ "extension",
14
+ "layers"
15
+ ],
16
+ "author": "Márcia Matias (@MarciaBM)",
17
+ "bugs": "https://github.com/LAND-IT/openlayers-style-editor/issues",
18
+ "main": "./dist/index.cjs",
19
+ "module": "./dist/index.js",
20
+ "types": "./dist/index.d.ts",
21
+ "style": "./dist/openlayers-style-editor.css",
22
+ "files": [
23
+ "dist"
24
+ ],
25
+ "scripts": {
26
+ "dev": "vite",
27
+ "build": "vite build --config vite.config.ts",
28
+ "build2": "tsc && vite build",
29
+ "start": "vite --host --open"
30
+ },
31
+ "peerDependencies": {
32
+ "ol": ">= 10.4.0",
33
+ "react": ">= 17.0.0",
34
+ "react-dom": ">= 17.0.0"
35
+ },
36
+ "dependencies": {
37
+ "chart.js": "4.4.8",
38
+ "geobuckets": "0.0.3",
39
+ "i18next": "24.2.2",
40
+ "primeicons": "7.0.0",
41
+ "primereact": "10.9.2",
42
+ "react-best-gradient-color-picker": "3.0.14",
43
+ "react-i18next": "15.4.1"
44
+ },
45
+ "devDependencies": {
46
+ "@eslint/js": "9.17.0",
47
+ "@types/node": "22.13.4",
48
+ "@types/react": "18.3.18",
49
+ "@types/react-dom": "18.3.5",
50
+ "@vitejs/plugin-react": "4.3.4",
51
+ "eslint": "8.57.0",
52
+ "eslint-plugin-react-hooks": "5.0.0",
53
+ "eslint-plugin-react-refresh": "0.4.16",
54
+ "globals": "16.0.0",
55
+ "typescript": "5.7.3",
56
+ "typescript-eslint": "8.22.0",
57
+ "vite": "6.2.0",
58
+ "vite-plugin-css-injected-by-js": "3.5.2",
59
+ "vite-plugin-dts": "4.5.0"
60
+ },
61
+ "publishConfig": {
62
+ "access": "public"
63
+ }
64
+ }