fix: better management of textArray and whitespaces in kml placemark …

…name
geops · Jul 8, 2024 · a97707d · a97707d
1 parent 8eb8e52
commit a97707d
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 12 deletions.
diff --git a/src/utils/KML.js b/src/utils/KML.js
@@ -469,9 +469,8 @@ const writeFeatures = (layer, featureProjection, mapResolution) => {
         clone.set("zIndex", newStyle.zIndex);
       }
 
-      // If we see spaces at the beginning or at the end we add a empty
-      // white space at the beginning and at the end.
       const text = newStyle.text?.getText();
+
       if (text) {
         let kmlText = text;
 
@@ -480,13 +479,22 @@ const writeFeatures = (layer, featureProjection, mapResolution) => {
           clone.set("textArray", JSON.stringify(text));
 
           // in the KML we just add the text without the bold or italic information
-          kmlText = text.map((t, idx) => {
-            return idx % 2 === 0 ? t : "";
-          });
+          kmlText = text
+            .map((t, idx) => {
+              return idx % 2 === 0 ? t : "";
+            })
+            .join("");
         }
 
-        if (/^\s|\s$/g.test(kmlText)) {
-          newStyle.text.setText(`\u200B${kmlText}\u200B`);
+        // We add the current text as features's name so it will be added as Placemark's name in the kml
+        if (kmlText) {
+          // If we see spaces at the beginning or at the end we add a empty
+          // white space at the beginning and at the end.
+          if (/^\s|\s$/g.test(kmlText)) {
+            clone.set("name", `\u200B${kmlText}\u200B`);
+          } else {
+            clone.set("name", kmlText);
+          }
         }
       }
 

diff --git a/src/utils/KML.test.js b/src/utils/KML.test.js
@@ -150,7 +150,7 @@ describe("KML", () => {
           <Document>
             <name>lala</name>
             <Placemark>
-              <name>   bar  </name>
+              <name>bar</name>
               <Style>
                 <IconStyle>
                   <scale>0</scale>
@@ -203,7 +203,7 @@ describe("KML", () => {
 
       // Text
       const styleText = style.getText();
-      expect(styleText.getText()).toBe("bar"); // spaces are trimmed.
+      expect(styleText.getText()).toBe("bar");
       expect(styleText.getFont()).toEqual("bold 16px arial");
       expect(styleText.getFill()).toEqual({
         color_: [32, 52, 126, 1],
@@ -231,13 +231,52 @@ describe("KML", () => {
       expectWriteResult(feats, str);
     });
 
+    test("should read/write TextStyle without trimming name", () => {
+      const str = `
+        <kml ${xmlns}>
+          <Document>
+            <name>lala</name>
+            <Placemark>
+              <name>\u200B   bar  \u200B</name>
+              <Style>
+                <IconStyle>
+                  <scale>0</scale>
+                </IconStyle>
+                <LabelStyle>
+                  <color>ff7e3420</color>
+                  <scale>2</scale>
+                </LabelStyle>
+              </Style>
+              <ExtendedData>
+                <Data name="textFont">
+                  <value>bold 16px arial</value>
+                </Data>
+              </ExtendedData>
+              <Point>
+                <coordinates>0,0,0</coordinates>
+              </Point>
+            </Placemark>
+          </Document>
+        </kml>
+      `;
+      const feats = KML.readFeatures(str);
+      const style = feats[0].getStyleFunction()(feats[0], 1);
+      expect(feats.length).toBe(1);
+      expect(style instanceof Style).toBe(true);
+
+      // Text
+      const styleText = style.getText();
+      expect(styleText.getText()).toBe("   bar  "); // Avoid trim spaces using unicode \u200B
+      expectWriteResult(feats, str);
+    });
+
     test("should read/write TextStyle with textArray as ExtendedData.", () => {
       const str = `
         <kml ${xmlns}>
           <Document>
             <name>lala</name>
             <Placemark>
-              <name>   bar  </name>
+              <name>\u200B\n   foo   \n\u200B</name>
               <Style>
                 <IconStyle>
                   <scale>0</scale>
@@ -249,7 +288,7 @@ describe("KML", () => {
               </Style>
               <ExtendedData>
                 <Data name="textArray">
-                  <value>["foo","bar","\\n",""]</value>
+                  <value>["\\n","","   ","","foo","bold 16px arial","   ","","\\n",""]</value>
                 </Data>
                 <Data name="textFont">
                   <value>bold 16px arial</value>
@@ -269,7 +308,21 @@ describe("KML", () => {
 
       // Text
       const styleText = style.getText();
-      expect(styleText.getText()).toEqual(["foo", "bar", "\n", ""]);
+
+      // Make sure it is an array, the toEqual on nextline is not working properly because the array is converted to a string for comparaison.
+      expect(Array.isArray(styleText.getText())).toBe(true);
+      expect(styleText.getText()).toEqual([
+        "\n",
+        "",
+        "   ",
+        "",
+        "foo",
+        "bold 16px arial",
+        "   ",
+        "",
+        "\n",
+        "",
+      ]);
       expect(styleText.getFont()).toEqual("bold 16px arial");
       expectWriteResult(feats, str);
     });