openlayers-style-editor 0.1.5 → 0.1.6

package/dist/index.cjs

@@ -46,6 +46,10 @@
     return GraduatedModes2;
   })(GraduatedModes || {});
   function getCategorizedStyle(attribute, colors, outlineColor, outlineWidth, defaultColor) {
+    if (outlineWidth == 0 && outlineColor != void 0)
+      outlineColor[3] = 0;
+    else if (outlineWidth != void 0 && outlineWidth > 0 && outlineColor)
+      outlineColor[3] = 1;
     let aux = [];
     aux.push("match");
     aux.push(["get", attribute]);
@@ -61,11 +65,15 @@
         "white",
         outlineColor || "#000000"
       ],
-      "stroke-width": ["case", ["==", ["var", "highlightedId"], ["id"]], 2, outlineWidth || 1],
+      "stroke-width": ["case", ["==", ["var", "highlightedId"], ["id"]], 2, outlineWidth == void 0 ? 1 : outlineWidth],
       "fill-color": aux
     };
   }
   function singleColorStyle(color, outlineColor, outlineWidth) {
+    if (outlineWidth == 0 && outlineColor != void 0)
+      outlineColor[3] = 0;
+    else if (outlineWidth != void 0 && outlineWidth > 0 && outlineColor)
+      outlineColor[3] = 1;
     return {
       "stroke-color": [
         "case",
@@ -73,7 +81,7 @@
         "white",
         outlineColor || "#000000"
       ],
-      "stroke-width": ["case", ["==", ["var", "highlightedId"], ["id"]], 2, outlineWidth || 1],
+      "stroke-width": ["case", ["==", ["var", "highlightedId"], ["id"]], 2, outlineWidth == void 0 ? 1 : outlineWidth],
       "stroke-offset": 0,
       "fill-color": color
     };
@@ -86,6 +94,10 @@
     };
   }
   function getGraduatedStyle(attribute, ramp, outlineColor, outlineWidth) {
+    if (outlineWidth == 0 && outlineColor != void 0)
+      outlineColor[3] = 0;
+    else if (outlineWidth != void 0 && outlineWidth > 0 && outlineColor)
+      outlineColor[3] = 1;
     let aux = [];
     aux.push("interpolate");
     aux.push(["linear"]);
@@ -101,7 +113,7 @@
         "white",
         outlineColor || "#000000"
       ],
-      "stroke-width": ["case", ["==", ["var", "highlightedId"], ["id"]], 2, outlineWidth || 1],
+      "stroke-width": ["case", ["==", ["var", "highlightedId"], ["id"]], 2, outlineWidth == void 0 ? 1 : outlineWidth],
       "fill-color": aux
     };
   }
@@ -260,7 +272,11 @@
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
             MyColorPicker,
             {
-              color: borderColor,
+              color: (() => {
+                if (borderColor.at(3) < 1)
+                  return [borderColor[0], borderColor[1], borderColor[2], 1];
+                return borderColor;
+              })(),
               hideAlpha: true,
               onChange: (e) => setBorderColor(color_js.fromString(e))
             }
@@ -801,7 +817,7 @@
         });
         setTable(tableUpdated);
       } else if (colorRamp.value.length > 0) {
-        const style = getCategorizedStyle(selectedAttr == null ? void 0 : selectedAttr.name, colorRamp.value);
+        const style = getCategorizedStyle(selectedAttr?.name, colorRamp.value);
         const colors = getStyleColorsAndValues(style, RenderType.Categorized);
         const tableUpdated = [];
         table.forEach(({ value, visible }) => {
@@ -908,7 +924,11 @@
               /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
                 MyColorPicker,
                 {
-                  color: borderColor,
+                  color: (() => {
+                    if (borderColor.at(3) < 1)
+                      return [borderColor[0], borderColor[1], borderColor[2], 1];
+                    return borderColor;
+                  })(),
                   hideAlpha: true,
                   onChange: (e) => setBorderColor(color_js.fromString(e))
                 }
@@ -1009,7 +1029,7 @@
             datatable_esm_js.DataTable,
             {
               value: table,
-              selectionMode: rowClick ? void 0 : "checkbox",
+              selectionMode: rowClick ? null : "checkbox",
               tableStyle: { minWidth: "25rem" },
               selection: table.filter((tr) => tr.visible),
               onSelectionChange: (e) => {
@@ -1042,8 +1062,8 @@
           onClick: () => {
             applyRenderer({
               type: RenderType.Categorized,
-              field: selectedAttr == null ? void 0 : selectedAttr.name,
-              rendererOL: getCategorizedStyle(selectedAttr == null ? void 0 : selectedAttr.name, table.filter((row) => row.value != nullText && row.visible).map((tr) => ({
+              field: selectedAttr?.name,
+              rendererOL: getCategorizedStyle(selectedAttr?.name, table.filter((row) => row.value != nullText && row.visible).map((tr) => ({
                 value: tr.value,
                 color: tr.color
               })), borderColor, borderThickness, table.find((row) => row.value == nullText).color)
@@ -1097,8 +1117,7 @@
     const locale = numbersLocale;
     const toast = react.useRef(null);
     const showToast = (message, severity) => {
-      var _a;
-      (_a = toast.current) == null ? void 0 : _a.show({ severity, summary: "Error", detail: message });
+      toast.current?.show({ severity, summary: "Error", detail: message });
     };
     const currentRender = layerCurrentRenderer.type != RenderType.Graduated ? [] : layerCurrentRenderer.rendererOL["fill-color"];
     const valuesAndColors = [];
@@ -1239,7 +1258,7 @@
     }
     async function calculateStopsByMode(mode, nClasses, intervalSize2) {
       let stops2 = [];
-      let values = (selectedAttr == null ? void 0 : selectedAttr.values.map(Number)) || [];
+      let values = selectedAttr?.values.map(Number) || [];
       values = values.filter((v) => !isNaN(v) && v != null);
       const min = Math.min(...values);
       const max = Math.max(...values);
@@ -1293,7 +1312,7 @@
     }
     react.useEffect(() => {
       if (stops.length > 0) {
-        let values = (selectedAttr == null ? void 0 : selectedAttr.values.map(Number)) || [];
+        let values = selectedAttr?.values.map(Number) || [];
         values = values.filter((v) => !isNaN(v) && v != null);
         setIntervals(countNumbers(values || []));
       }
@@ -1336,7 +1355,7 @@
                   if (context.tick) {
                     const value = Number.parseInt(context.tick.label);
                     const interval = stops.map((stop) => intervals.find((i) => i.min <= stop.value && stop.value < i.max));
-                    return interval.find((i) => (i == null ? void 0 : i.min) <= value && value < i.max) ? "#ea1010" : "rgba(0,0,0,0)";
+                    return interval.find((i) => i?.min <= value && value < i.max) ? "#ea1010" : "rgba(0,0,0,0)";
                   } else
                     return "rgba(0,0,0,0)";
                 },
@@ -1535,7 +1554,6 @@
                 ] }),
                 stops.map(
                   (value, index) => {
-                    var _a, _b;
                     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-row-small-small-gap", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         inputnumber_esm_js.InputNumber,
@@ -1544,7 +1562,7 @@
                           allowEmpty: false,
                           locale,
                           min: stops[0].value,
-                          max: index < stops.length - 1 ? ((_a = stops[index + 1]) == null ? void 0 : _a.value) - 1e-3 : (_b = stops[stops.length]) == null ? void 0 : _b.value,
+                          max: index < stops.length - 1 ? stops[index + 1]?.value - 1e-3 : stops[stops.length]?.value,
                           disabled: index === 0 || selectedMode != GraduatedModes.Manual || index === stops.length - 1,
                           onChange: (e) => {
                             const aux = [...stops];
@@ -1579,7 +1597,11 @@
                 /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
                   MyColorPicker,
                   {
-                    color: borderColor,
+                    color: (() => {
+                      if (borderColor.at(3) < 1)
+                        return [borderColor[0], borderColor[1], borderColor[2], 1];
+                      return borderColor;
+                    })(),
                     hideAlpha: true,
                     onChange: (e) => setBorderColor(color_js.fromString(e))
                   }
@@ -1666,8 +1688,8 @@
                   applyRenderer({
                     type: RenderType.Graduated,
                     graduatedType: selectedMode,
-                    field: selectedAttr == null ? void 0 : selectedAttr.name,
-                    rendererOL: getGraduatedStyle(selectedAttr == null ? void 0 : selectedAttr.name, stops, borderColor, borderThickness)
+                    field: selectedAttr?.name,
+                    rendererOL: getGraduatedStyle(selectedAttr?.name, stops, borderColor, borderThickness)
                   });
                   setVisible(false);
                 }
@@ -1738,7 +1760,7 @@
           }
         )
       ] }),
-      (activeIndex == null ? void 0 : activeIndex.code) == 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      activeIndex?.code == 0 && /* @__PURE__ */ jsxRuntime.jsx(
         UniqueSymbol,
         {
           layerCurrentRenderer: currentRenderer,
@@ -1747,7 +1769,7 @@
           setVisible
         }
       ),
-      (activeIndex == null ? void 0 : activeIndex.code) == 1 && /* @__PURE__ */ jsxRuntime.jsx(
+      activeIndex?.code == 1 && /* @__PURE__ */ jsxRuntime.jsx(
         Categorized,
         {
           attr,
@@ -1760,7 +1782,7 @@
           showPreDefinedRamps
         }
       ),
-      (activeIndex == null ? void 0 : activeIndex.code) == 2 && /* @__PURE__ */ jsxRuntime.jsx(
+      activeIndex?.code == 2 && /* @__PURE__ */ jsxRuntime.jsx(
         Graduated,
         {
           attr,

package/dist/index.js

@@ -60,6 +60,10 @@ var GraduatedModes = /* @__PURE__ */ ((GraduatedModes2) => {
   return GraduatedModes2;
 })(GraduatedModes || {});
 function getCategorizedStyle(attribute, colors, outlineColor, outlineWidth, defaultColor) {
+  if (outlineWidth == 0 && outlineColor != void 0)
+    outlineColor[3] = 0;
+  else if (outlineWidth != void 0 && outlineWidth > 0 && outlineColor)
+    outlineColor[3] = 1;
   let aux = [];
   aux.push("match");
   aux.push(["get", attribute]);
@@ -75,11 +79,15 @@ function getCategorizedStyle(attribute, colors, outlineColor, outlineWidth, defa
       "white",
       outlineColor || "#000000"
     ],
-    "stroke-width": ["case", ["==", ["var", "highlightedId"], ["id"]], 2, outlineWidth || 1],
+    "stroke-width": ["case", ["==", ["var", "highlightedId"], ["id"]], 2, outlineWidth == void 0 ? 1 : outlineWidth],
     "fill-color": aux
   };
 }
 function singleColorStyle(color, outlineColor, outlineWidth) {
+  if (outlineWidth == 0 && outlineColor != void 0)
+    outlineColor[3] = 0;
+  else if (outlineWidth != void 0 && outlineWidth > 0 && outlineColor)
+    outlineColor[3] = 1;
   return {
     "stroke-color": [
       "case",
@@ -87,7 +95,7 @@ function singleColorStyle(color, outlineColor, outlineWidth) {
       "white",
       outlineColor || "#000000"
     ],
-    "stroke-width": ["case", ["==", ["var", "highlightedId"], ["id"]], 2, outlineWidth || 1],
+    "stroke-width": ["case", ["==", ["var", "highlightedId"], ["id"]], 2, outlineWidth == void 0 ? 1 : outlineWidth],
     "stroke-offset": 0,
     "fill-color": color
   };
@@ -100,6 +108,10 @@ function singleColorStyleForLines(color) {
   };
 }
 function getGraduatedStyle(attribute, ramp, outlineColor, outlineWidth) {
+  if (outlineWidth == 0 && outlineColor != void 0)
+    outlineColor[3] = 0;
+  else if (outlineWidth != void 0 && outlineWidth > 0 && outlineColor)
+    outlineColor[3] = 1;
   let aux = [];
   aux.push("interpolate");
   aux.push(["linear"]);
@@ -115,7 +127,7 @@ function getGraduatedStyle(attribute, ramp, outlineColor, outlineWidth) {
       "white",
       outlineColor || "#000000"
     ],
-    "stroke-width": ["case", ["==", ["var", "highlightedId"], ["id"]], 2, outlineWidth || 1],
+    "stroke-width": ["case", ["==", ["var", "highlightedId"], ["id"]], 2, outlineWidth == void 0 ? 1 : outlineWidth],
     "fill-color": aux
   };
 }
@@ -274,7 +286,11 @@ const UniqueSymbol = (props) => {
         /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
           MyColorPicker,
           {
-            color: borderColor,
+            color: (() => {
+              if (borderColor.at(3) < 1)
+                return [borderColor[0], borderColor[1], borderColor[2], 1];
+              return borderColor;
+            })(),
             hideAlpha: true,
             onChange: (e) => setBorderColor(fromString(e))
           }
@@ -815,7 +831,7 @@ const Categorized = (props) => {
       });
       setTable(tableUpdated);
     } else if (colorRamp.value.length > 0) {
-      const style = getCategorizedStyle(selectedAttr == null ? void 0 : selectedAttr.name, colorRamp.value);
+      const style = getCategorizedStyle(selectedAttr?.name, colorRamp.value);
       const colors = getStyleColorsAndValues(style, RenderType.Categorized);
       const tableUpdated = [];
       table.forEach(({ value, visible }) => {
@@ -922,7 +938,11 @@ const Categorized = (props) => {
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
               MyColorPicker,
               {
-                color: borderColor,
+                color: (() => {
+                  if (borderColor.at(3) < 1)
+                    return [borderColor[0], borderColor[1], borderColor[2], 1];
+                  return borderColor;
+                })(),
                 hideAlpha: true,
                 onChange: (e) => setBorderColor(fromString(e))
               }
@@ -1023,7 +1043,7 @@ const Categorized = (props) => {
           DataTable,
           {
             value: table,
-            selectionMode: rowClick ? void 0 : "checkbox",
+            selectionMode: rowClick ? null : "checkbox",
             tableStyle: { minWidth: "25rem" },
             selection: table.filter((tr) => tr.visible),
             onSelectionChange: (e) => {
@@ -1056,8 +1076,8 @@ const Categorized = (props) => {
         onClick: () => {
           applyRenderer({
             type: RenderType.Categorized,
-            field: selectedAttr == null ? void 0 : selectedAttr.name,
-            rendererOL: getCategorizedStyle(selectedAttr == null ? void 0 : selectedAttr.name, table.filter((row) => row.value != nullText && row.visible).map((tr) => ({
+            field: selectedAttr?.name,
+            rendererOL: getCategorizedStyle(selectedAttr?.name, table.filter((row) => row.value != nullText && row.visible).map((tr) => ({
               value: tr.value,
               color: tr.color
             })), borderColor, borderThickness, table.find((row) => row.value == nullText).color)
@@ -1111,8 +1131,7 @@ const Graduated = (props) => {
   const locale = numbersLocale;
   const toast = useRef(null);
   const showToast = (message, severity) => {
-    var _a;
-    (_a = toast.current) == null ? void 0 : _a.show({ severity, summary: "Error", detail: message });
+    toast.current?.show({ severity, summary: "Error", detail: message });
   };
   const currentRender = layerCurrentRenderer.type != RenderType.Graduated ? [] : layerCurrentRenderer.rendererOL["fill-color"];
   const valuesAndColors = [];
@@ -1253,7 +1272,7 @@ const Graduated = (props) => {
   }
   async function calculateStopsByMode(mode, nClasses, intervalSize2) {
     let stops2 = [];
-    let values = (selectedAttr == null ? void 0 : selectedAttr.values.map(Number)) || [];
+    let values = selectedAttr?.values.map(Number) || [];
     values = values.filter((v) => !isNaN(v) && v != null);
     const min = Math.min(...values);
     const max = Math.max(...values);
@@ -1307,7 +1326,7 @@ const Graduated = (props) => {
   }
   useEffect(() => {
     if (stops.length > 0) {
-      let values = (selectedAttr == null ? void 0 : selectedAttr.values.map(Number)) || [];
+      let values = selectedAttr?.values.map(Number) || [];
       values = values.filter((v) => !isNaN(v) && v != null);
       setIntervals(countNumbers(values || []));
     }
@@ -1350,7 +1369,7 @@ const Graduated = (props) => {
                 if (context.tick) {
                   const value = Number.parseInt(context.tick.label);
                   const interval = stops.map((stop) => intervals.find((i) => i.min <= stop.value && stop.value < i.max));
-                  return interval.find((i) => (i == null ? void 0 : i.min) <= value && value < i.max) ? "#ea1010" : "rgba(0,0,0,0)";
+                  return interval.find((i) => i?.min <= value && value < i.max) ? "#ea1010" : "rgba(0,0,0,0)";
                 } else
                   return "rgba(0,0,0,0)";
               },
@@ -1549,7 +1568,6 @@ const Graduated = (props) => {
               ] }),
               stops.map(
                 (value, index) => {
-                  var _a, _b;
                   return /* @__PURE__ */ jsxs("div", { className: "flex-row-small-small-gap", children: [
                     /* @__PURE__ */ jsx(
                       InputNumber,
@@ -1558,7 +1576,7 @@ const Graduated = (props) => {
                         allowEmpty: false,
                         locale,
                         min: stops[0].value,
-                        max: index < stops.length - 1 ? ((_a = stops[index + 1]) == null ? void 0 : _a.value) - 1e-3 : (_b = stops[stops.length]) == null ? void 0 : _b.value,
+                        max: index < stops.length - 1 ? stops[index + 1]?.value - 1e-3 : stops[stops.length]?.value,
                         disabled: index === 0 || selectedMode != GraduatedModes.Manual || index === stops.length - 1,
                         onChange: (e) => {
                           const aux = [...stops];
@@ -1593,7 +1611,11 @@ const Graduated = (props) => {
               /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
                 MyColorPicker,
                 {
-                  color: borderColor,
+                  color: (() => {
+                    if (borderColor.at(3) < 1)
+                      return [borderColor[0], borderColor[1], borderColor[2], 1];
+                    return borderColor;
+                  })(),
                   hideAlpha: true,
                   onChange: (e) => setBorderColor(fromString(e))
                 }
@@ -1680,8 +1702,8 @@ const Graduated = (props) => {
                 applyRenderer({
                   type: RenderType.Graduated,
                   graduatedType: selectedMode,
-                  field: selectedAttr == null ? void 0 : selectedAttr.name,
-                  rendererOL: getGraduatedStyle(selectedAttr == null ? void 0 : selectedAttr.name, stops, borderColor, borderThickness)
+                  field: selectedAttr?.name,
+                  rendererOL: getGraduatedStyle(selectedAttr?.name, stops, borderColor, borderThickness)
                 });
                 setVisible(false);
               }
@@ -1752,7 +1774,7 @@ const GeometryEditor = (props) => {
         }
       )
     ] }),
-    (activeIndex == null ? void 0 : activeIndex.code) == 0 && /* @__PURE__ */ jsx(
+    activeIndex?.code == 0 && /* @__PURE__ */ jsx(
       UniqueSymbol,
       {
         layerCurrentRenderer: currentRenderer,
@@ -1761,7 +1783,7 @@ const GeometryEditor = (props) => {
         setVisible
       }
     ),
-    (activeIndex == null ? void 0 : activeIndex.code) == 1 && /* @__PURE__ */ jsx(
+    activeIndex?.code == 1 && /* @__PURE__ */ jsx(
       Categorized,
       {
         attr,
@@ -1774,7 +1796,7 @@ const GeometryEditor = (props) => {
         showPreDefinedRamps
       }
     ),
-    (activeIndex == null ? void 0 : activeIndex.code) == 2 && /* @__PURE__ */ jsx(
+    activeIndex?.code == 2 && /* @__PURE__ */ jsx(
       Graduated,
       {
         attr,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openlayers-style-editor",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "description": "A style editor extension for OpenLayers currently working with WebGL Vector Layers",
   "homepage": "https://land-it.github.io/openlayers-style-editor/",
@@ -34,29 +34,29 @@
     "react-dom": ">= 17.0.0"
   },
   "dependencies": {
-    "chart.js": "4.4.8",
+    "chart.js": "4.5.1",
     "geobuckets": "0.0.3",
-    "i18next": "24.2.2",
+    "i18next": "25.6.0",
     "primeicons": "7.0.0",
-    "primereact": "10.9.2",
+    "primereact": "10.9.7",
     "react-best-gradient-color-picker": "3.0.14",
-    "react-i18next": "15.4.1"
+    "react-i18next": "16.2.0"
   },
   "devDependencies": {
-    "@eslint/js": "9.17.0",
-    "@types/node": "22.13.4",
+    "@eslint/js": "9.38.0",
+    "@types/node": "24.9.1",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
-    "@vitejs/plugin-react": "4.3.4",
+    "@vitejs/plugin-react": "5.1.0",
     "eslint": "8.57.0",
-    "eslint-plugin-react-hooks": "5.0.0",
-    "eslint-plugin-react-refresh": "0.4.16",
-    "globals": "16.0.0",
-    "typescript": "5.7.3",
-    "typescript-eslint": "8.22.0",
-    "vite": "6.2.0",
+    "eslint-plugin-react-hooks": "7.0.0",
+    "eslint-plugin-react-refresh": "0.4.24",
+    "globals": "16.4.0",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.46.2",
+    "vite": "7.1.12",
     "vite-plugin-css-injected-by-js": "3.5.2",
-    "vite-plugin-dts": "4.5.0"
+    "vite-plugin-dts": "4.5.4"
   },
   "publishConfig": {
     "access": "public"