fix: add all line style properties to the KML reader/writer

Author: oterral

package.json

@@ -7,9 +7,9 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@geops/geops-ui": "0.3.2",
-    "@mui/icons-material": "^5.15.17",
-    "@mui/material": "^5.15.17",
-    "re-resizable": "6.9.16",
+    "@mui/icons-material": "^5.15.20",
+    "@mui/material": "^5.15.20",
+    "re-resizable": "6.9.17",
     "react-icons": "5.2.1",
     "resize-observer-polyfill": "1.5.1"
   },
@@ -22,30 +22,31 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@babel/preset-env": "7.24.5",
-    "@babel/preset-react": "7.24.1",
+    "@babel/preset-env": "7.24.7",
+    "@babel/preset-react": "7.24.7",
     "@cfaester/enzyme-adapter-react-18": "0.8.0",
     "@commitlint/cli": "19.3.0",
     "@commitlint/config-conventional": "19.2.2",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/webpack": "8.1.0",
-    "@testing-library/jest-dom": "6.4.5",
-    "@testing-library/react": "15.0.7",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "6.4.6",
+    "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "canvas": "2.11.2",
-    "css-loader": "7.1.1",
+    "css-loader": "7.1.2",
     "enzyme": "3.11.0",
-    "esbuild": "^0.21.2",
-    "esbuild-loader": "^4.1.0",
+    "esbuild": "^0.21.5",
+    "esbuild-loader": "^4.2.0",
     "eslint": "8",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-react": "7.34.1",
+    "eslint-plugin-react": "7.34.3",
     "eslint-plugin-react-hooks": "4.6.2",
     "file-loader": "6.2.0",
     "fixpack": "4.0.0",
@@ -62,33 +63,33 @@
     "jest-transform-file": "1.1.1",
     "jest-transformer-svg": "^2.0.2",
     "jsts": "2.11.3",
-    "lint-staged": "15.2.2",
+    "lint-staged": "15.2.7",
     "mapbox-gl": "1.13.1",
-    "maplibre-gl": "4.2.0",
-    "mobility-toolbox-js": "2.4.1",
-    "ol": "8.2.0",
+    "maplibre-gl": "4.4.1",
+    "mobility-toolbox-js": "2.4.2",
+    "ol": "9.2.4",
     "postcss": "^8.4.38",
-    "prettier": "3.2.5",
+    "prettier": "3.3.2",
     "proj4": "2.11.0",
     "prop-types": "15.8.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-styleguidist": "13.1.2",
     "react-svg-loader": "3.0.3",
     "react-test-renderer": "18.3.1",
-    "sass": "1.77.1",
+    "sass": "1.77.6",
     "sass-loader": "14.2.1",
     "standard-version": "9.5.0",
     "stream-array": "1.1.2",
     "style-loader": "4.0.0",
-    "stylelint": "16.5.0",
+    "stylelint": "16.6.1",
     "stylelint-config-recommended-scss": "14.0.0",
     "stylelint-config-standard": "36.0.0",
-    "stylelint-scss": "6.3.0",
+    "stylelint-scss": "6.3.2",
     "terser-webpack-plugin": "^5.3.10",
     "url-loader": "4.1.1",
     "vinyl-fs": "4.0.0",
-    "webpack": "^5.91.0",
+    "webpack": "^5.92.1",
     "xml-beautifier": "0.5.0"
   },
   "scripts": {

src/utils/KML.js

@@ -93,8 +93,17 @@ const sanitizeFeature = (feature, doNotRevert32pxScaling = false) => {
   const style = (Array.isArray(tmpStyles) ? tmpStyles[0] : tmpStyles).clone();
 
   let stroke = style.getStroke();
-  if (stroke && feature.get("lineDash")) {
-    stroke.setLineDash(
+
+  if (feature.get("lineCap")) {
+    stroke?.setLineCap(feature.get("lineCap"));
+  }
+
+  if (feature.get("lineJoin")) {
+    stroke?.setLineJoin(feature.get("lineJoin"));
+  }
+
+  if (feature.get("lineDash")) {
+    stroke?.setLineDash(
       feature
         .get("lineDash")
         .split(",")
@@ -104,6 +113,14 @@ const sanitizeFeature = (feature, doNotRevert32pxScaling = false) => {
     );
   }
 
+  if (feature.get("lineDashOffset")) {
+    stroke?.setLineDashOffset(parseInt(feature.get("lineDashOffset"), 10));
+  }
+
+  if (feature.get("miterLimit")) {
+    stroke?.setMiterLimit(parseInt(feature.get("miterLimit"), 10));
+  }
+
   // The canvas draws a stroke width=1 by default if width=0, so we
   // remove the stroke style in that case.
   if (stroke && stroke.getWidth() === 0) {
@@ -478,21 +495,37 @@ const writeFeatures = (layer, featureProjection, mapResolution) => {
         }
       }
 
-      if (newStyle.text && newStyle.text.getBackgroundFill()) {
+      if (newStyle.text?.getBackgroundFill()) {
         clone.set(
           "textBackgroundFillColor",
           asString(newStyle.text.getBackgroundFill().getColor()),
         );
       }
 
-      if (newStyle.text && newStyle.text.getPadding()) {
+      if (newStyle.text?.getPadding()) {
         clone.set("textPadding", newStyle.text.getPadding().join());
       }
 
-      if (newStyle.stroke && newStyle.stroke.getLineDash()) {
+      if (newStyle.stroke?.getLineCap()) {
+        clone.set("lineCap", newStyle.stroke.getLineCap());
+      }
+
+      if (newStyle.stroke?.getLineJoin()) {
+        clone.set("lineJoin", newStyle.stroke.getLineJoin());
+      }
+
+      if (newStyle.stroke?.getLineDash()) {
         clone.set("lineDash", newStyle.stroke.getLineDash().join(","));
       }
 
+      if (newStyle.stroke?.getLineDashOffset()) {
+        clone.set("lineDashOffset", newStyle.stroke.getLineDashOffset());
+      }
+
+      if (newStyle.stroke?.getMiterLimit()) {
+        clone.set("miterLimit", newStyle.stroke.getMiterLimit());
+      }
+
       if (newStyle.image instanceof Circle) {
         newStyle.image = null;
       }

src/utils/KML.test.js

@@ -94,9 +94,13 @@ describe("KML", () => {
                   </LineStyle>
                 </Style>
                 <ExtendedData>
+                  <Data name="lineCap"><value>butt</value></Data>
                   <Data name="lineDash"><value>40,40</value></Data>
+                  <Data name="lineDashOffset"><value>5</value></Data>
                   <Data name="lineEndIcon"><value>{"url":"fooarrowend.png","scale":0.35,"size":[36,58],"zIndex":1}</value></Data>
+                  <Data name="lineJoin"><value>square</value></Data>
                   <Data name="lineStartIcon"><value>{"url":"fooarrowstart.png","scale":0.35,"size":[36,58],"zIndex":1}</value></Data>
+                  <Data name="miterLimit"><value>14</value></Data>
                 </ExtendedData>
                 <LineString><coordinates>0,1,0 3,5,0 40,25,0</coordinates></LineString>
             </Placemark>
@@ -201,7 +205,10 @@ describe("KML", () => {
       const styleText = style.getText();
       expect(styleText.getText()).toBe("bar"); // spaces are trimmed.
       expect(styleText.getFont()).toEqual("bold 16px arial");
-      expect(styleText.getFill()).toEqual({ color_: [32, 52, 126, 1] });
+      expect(styleText.getFill()).toEqual({
+        color_: [32, 52, 126, 1],
+        patternImage_: null,
+      });
       expect(styleText.getStroke()).toEqual({
         color_: "rgba(100,255,255,0.2)",
         width_: 3,
@@ -216,6 +223,7 @@ describe("KML", () => {
       expect(styleText.getPadding()).toEqual([5, 6, 7, 8]);
       expect(styleText.getBackgroundFill()).toEqual({
         color_: "rgba(255,255,255,0.01)",
+        patternImage_: null,
       });
       expect(styleText.getTextAlign()).toEqual("right");
       expect(styleText.getOffsetX()).toEqual(-90);