Use match instead of case

a-b-street · May 5, 2024 · cf6b284 · cf6b284
1 parent 82c9f22
commit cf6b284
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 35 deletions.
diff --git a/web/src/common/layers/RenderIntersectionMarkings.svelte b/web/src/common/layers/RenderIntersectionMarkings.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import LayerControls from "../LayerControls.svelte";
   import { network } from "../store";
-  import { layerId, caseHelper } from "../utils";
-  import { emptyGeojson } from "svelte-utils";
+  import { layerId } from "../utils";
+  import { emptyGeojson, constructMatchExpression } from "svelte-utils";
   import { FillLayer, GeoJSON } from "svelte-maplibre";
 
   let show = true;
@@ -19,8 +19,8 @@
       visibility: show ? "visible" : "none",
     }}
     paint={{
-      "fill-color": caseHelper(
-        "type",
+      "fill-color": constructMatchExpression(
+        ["get", "type"],
         {
           "sidewalk corner": "#CCCCCC",
           "marked crossing line": "white",

diff --git a/web/src/common/layers/RenderIntersectionPolygons.svelte b/web/src/common/layers/RenderIntersectionPolygons.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import LayerControls from "../LayerControls.svelte";
   import { theme, hoveredIntersection, network } from "../store";
-  import { caseHelper, layerId } from "../utils";
-  import { emptyGeojson } from "svelte-utils";
+  import { layerId } from "../utils";
+  import { emptyGeojson, constructMatchExpression } from "svelte-utils";
   import { hoverStateFilter, FillLayer, GeoJSON } from "svelte-maplibre";
 
   export let hoverCursor: string | undefined = undefined;
@@ -24,8 +24,8 @@
     filter={["==", ["get", "type"], "intersection"]}
     paint={{
       "fill-color": {
-        debug: caseHelper(
-          "intersection_kind",
+        debug: constructMatchExpression(
+          ["get", "intersection_kind"],
           {
             MapEdge: "#696",
             Terminus: "#999",

diff --git a/web/src/common/layers/RenderLaneMarkings.svelte b/web/src/common/layers/RenderLaneMarkings.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { layerId, caseHelper } from "../utils";
-  import { emptyGeojson } from "svelte-utils";
+  import { layerId } from "../utils";
+  import { emptyGeojson, constructMatchExpression } from "svelte-utils";
   import { FillLayer, GeoJSON } from "svelte-maplibre";
   import LayerControls from "../LayerControls.svelte";
   import { network } from "../store";
@@ -21,8 +21,8 @@
       visibility: show ? "visible" : "none",
     }}
     paint={{
-      "fill-color": caseHelper(
-        "type",
+      "fill-color": constructMatchExpression(
+        ["get", "type"],
         {
           "center line": "yellow",
           "lane separator": general_road_marking,

diff --git a/web/src/common/layers/RenderLanePolygons.svelte b/web/src/common/layers/RenderLanePolygons.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import LayerControls from "../LayerControls.svelte";
   import { hoveredLane, network } from "../store";
-  import { layerId, caseHelper } from "../utils";
-  import { emptyGeojson } from "svelte-utils";
+  import { layerId } from "../utils";
+  import { constructMatchExpression, emptyGeojson } from "svelte-utils";
   import { hoverStateFilter, FillLayer, GeoJSON } from "svelte-maplibre";
 
   export let hoverCursor: string | undefined = undefined;
@@ -25,8 +25,8 @@
     {hoverCursor}
     on:click
     paint={{
-      "fill-color": caseHelper(
-        "type",
+      "fill-color": constructMatchExpression(
+        ["get", "type"],
         // TODO Could we express the Rust enum in TS and be type-safe here?
         {
           Driving: "black",

diff --git a/web/src/common/utils.ts b/web/src/common/utils.ts
@@ -1,23 +1,7 @@
 import type { Feature, Geometry } from "geojson";
 import { get } from "svelte/store";
-import type { ExpressionSpecification } from "maplibre-gl";
 import { map as mapStore } from "./store";
 
-// Helper for https://maplibre.org/maplibre-style-spec/expressions#case based on one property
-export function caseHelper(
-  getKey: string,
-  map: { [name: string]: string },
-  backup: string,
-): ExpressionSpecification {
-  let x: any[] = ["case"];
-  for (let [key, value] of Object.entries(map)) {
-    x.push(["==", ["get", getKey], key]);
-    x.push(value);
-  }
-  x.push(backup);
-  return x as ExpressionSpecification;
-}
-
 export function featureStateToggle(
   key: string,
   falseCase: number,

diff --git a/web/src/street-explorer/RenderBlock.svelte b/web/src/street-explorer/RenderBlock.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { caseHelper, layerId } from "../common/utils";
+  import { layerId } from "../common/utils";
   import {
     hoverStateFilter,
     Popup,
@@ -9,7 +9,7 @@
   } from "svelte-maplibre";
   import { showingBundles, blockGj } from "./stores";
   import { network } from "../common";
-  import { emptyGeojson, Legend } from "svelte-utils";
+  import { constructMatchExpression, emptyGeojson, Legend } from "svelte-utils";
 
   $: active = $blockGj.features.length > 0;
 
@@ -46,7 +46,7 @@
     filter={["==", ["get", "type"], "block"]}
     manageHoverState
     paint={{
-      "fill-color": caseHelper("kind", colors, "red"),
+      "fill-color": constructMatchExpression(["get", "kind"], colors, "red"),
       "fill-opacity": hoverStateFilter(0.8, 0.4),
     }}
   >