fix(web): Layer style expression startsWith doesn’t work[VIZ-2094] (#1759)

Author: ZTongci

web/src/app/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/convert.test.tsx

@@ -218,6 +218,51 @@ describe("parseConditions", () => {
       }
     ]);
   });
+
+  it("should parse startsWith function call format correctly", () => {
+    const conditions = parseConditions("color", [
+      ["startsWith(${gml_id}, 'bldg')", "color('red')"]
+    ]);
+
+    expect(conditions).toEqual([
+      {
+        variable: "${gml_id}",
+        operator: "startsWith",
+        value: "'bldg'",
+        applyValue: "red"
+      }
+    ]);
+  });
+
+  it("should parse startsWith operator format correctly", () => {
+    const conditions = parseConditions("color", [
+      ["${gml_id} startsWith 'bldg'", "color('red')"]
+    ]);
+
+    expect(conditions).toEqual([
+      {
+        variable: "${gml_id}",
+        operator: "startsWith",
+        value: "'bldg'",
+        applyValue: "red"
+      }
+    ]);
+  });
+
+  it("should handle startsWith with different field types", () => {
+    const conditions = parseConditions("text", [
+      ["startsWith(${name}, 'test')", "'example'"]
+    ]);
+
+    expect(conditions).toEqual([
+      {
+        variable: "${name}",
+        operator: "startsWith",
+        value: "'test'",
+        applyValue: "example"
+      }
+    ]);
+  });
 });
 
 it("should parse conditions with URL values correctly", () => {
@@ -255,6 +300,58 @@ describe("generateConditions", () => {
       ["${marker-size} === 'medium'", "12"]
     ]);
   });
+
+  it("should generate startsWith in function call format", () => {
+    const startsWithConditions = generateConditions("color", [
+      {
+        variable: "${gml_id}",
+        operator: "startsWith",
+        value: "'bldg'",
+        applyValue: "#FF0000"
+      }
+    ]);
+
+    expect(startsWithConditions).toEqual([
+      ["startsWith(${gml_id}, 'bldg')", "color('#FF0000')"]
+    ]);
+  });
+
+  it("should generate other operators in standard format", () => {
+    const mixedConditions = generateConditions("color", [
+      {
+        variable: "${gml_id}",
+        operator: "startsWith",
+        value: "'bldg'",
+        applyValue: "#FF0000"
+      },
+      {
+        variable: "${type}",
+        operator: "===",
+        value: "'building'",
+        applyValue: "#00FF00"
+      }
+    ]);
+
+    expect(mixedConditions).toEqual([
+      ["startsWith(${gml_id}, 'bldg')", "color('#FF0000')"],
+      ["${type} === 'building'", "color('#00FF00')"]
+    ]);
+  });
+
+  it("should handle startsWith with different field types", () => {
+    const textConditions = generateConditions("text", [
+      {
+        variable: "${name}",
+        operator: "startsWith",
+        value: "'test'",
+        applyValue: "example"
+      }
+    ]);
+
+    expect(textConditions).toEqual([
+      ["startsWith(${name}, 'test')", "'example'"]
+    ]);
+  });
 });
 
 describe("wrapColor", () => {

web/src/app/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/convert.ts

@@ -47,9 +47,7 @@ export const convertToStyleNodes = (
   }, {} as StyleNodes);
 };
 
-export const checkExpressionAndConditions = (
-  v: unknown
-): StyleValueType => {
+export const checkExpressionAndConditions = (v: unknown): StyleValueType => {
   if (
     typeof v === "string" ||
     typeof v === "number" ||
@@ -169,11 +167,30 @@ export const parseConditions = (
   conditions: [string, string][]
 ): StyleCondition[] => {
   const operatorRegex = new RegExp(
-    `(${styleConditionOperators.map((op) => op.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")})`
+    `(${styleConditionOperators
+      .map((op) => {
+        if (op === "startsWith") {
+          return "startsWith";
+        }
+        return op.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      })
+      .join("|")})`
   );
 
   return conditions
     .map(([condition, applyValue]) => {
+      if (condition.startsWith("startsWith(")) {
+        const match = condition.match(/^startsWith\((.+),\s*(.+)\)$/);
+        if (match) {
+          return {
+            variable: match[1].trim(),
+            operator: "startsWith" as StyleConditionOperator,
+            value: match[2].trim(),
+            applyValue: unwrapConditionAppliedValue(field, applyValue)
+          };
+        }
+      }
+
       const match = condition.match(operatorRegex);
 
       if (match) {
@@ -200,8 +217,15 @@ export const generateConditions = (
 ): [string, string][] => {
   if (!conditions) return [];
   return conditions.map((c) => {
+    let conditionExpression: string;
+    if (c.operator === "startsWith") {
+      conditionExpression = `startsWith(${c.variable}, ${c.value})`;
+    } else {
+      conditionExpression = `${c.variable} ${c.operator} ${c.value}`;
+    }
+
     return [
-      `${c.variable} ${c.operator} ${c.value}`,
+      conditionExpression,
       wrapConditionApplyValue((c.applyValue ?? "").toString(), field)
     ];
   });