Skip to content

Commit ee9ac30

Browse files
dabreegsterdabreegster
committed
Use the Popup trick to fix most TS errors. #2 
1 parent 9ff5697 commit ee9ac30

7 files changed

+56
-38
lines changed

‎web/src/DebugGJ.svelte

+5-6
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@
44
CircleLayer,
55
GeoJSON,
66
LineLayer,
7-
Popup,
87
} from "svelte-maplibre";
9-
import { notNull, PropertiesTable } from "./common";
8+
import { Popup, notNull, PropertiesTable } from "./common";
109
import SplitComponent from "./SplitComponent.svelte";
1110
import { app, mode } from "./stores";
1211
@@ -32,8 +31,8 @@
3231
"line-opacity": hoverStateFilter(0.5, 1.0),
3332
}}
3433
>
35-
<Popup openOn="hover" let:data>
36-
<PropertiesTable properties={notNull(data).properties} />
34+
<Popup openOn="hover" let:props>
35+
<PropertiesTable properties={props} />
3736
</Popup>
3837
</LineLayer>
3938
<CircleLayer
@@ -44,8 +43,8 @@
4443
"circle-opacity": hoverStateFilter(0.5, 1.0),
4544
}}
4645
>
47-
<Popup openOn="hover" let:data>
48-
<PropertiesTable properties={notNull(data).properties} />
46+
<Popup openOn="hover" let:props>
47+
<PropertiesTable properties={props} />
4948
</Popup>
5049
</CircleLayer>
5150
</GeoJSON>

‎web/src/DebugMode.svelte

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
2-
import { CircleLayer, GeoJSON, LineLayer, Popup } from "svelte-maplibre";
3-
import { notNull, PropertiesTable } from "./common";
2+
import { CircleLayer, GeoJSON, LineLayer } from "svelte-maplibre";
3+
import { notNull, PropertiesTable, Popup } from "./common";
44
import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
55
import SplitComponent from "./SplitComponent.svelte";
66
import { app, mode } from "./stores";
@@ -24,8 +24,8 @@
2424
onClickLine={(f) => window.open(notNull(f.properties).way, "_blank")}
2525
>
2626
<div slot="line-popup">
27-
<Popup openOn="hover" let:data>
28-
<PropertiesTable properties={notNull(data).properties} />
27+
<Popup openOn="hover" let:props>
28+
<PropertiesTable properties={props} />
2929
</Popup>
3030
</div>
3131
<svelte:fragment slot="more-layers">
@@ -36,8 +36,8 @@
3636
"circle-color": "green",
3737
}}
3838
>
39-
<Popup openOn="hover" let:data>
40-
<PropertiesTable properties={notNull(data).properties} />
39+
<Popup openOn="hover" let:props>
40+
<PropertiesTable properties={props} />
4141
</Popup>
4242
</CircleLayer>
4343
<LineLayer
@@ -47,8 +47,8 @@
4747
"line-color": "blue",
4848
}}
4949
>
50-
<Popup openOn="hover" let:data>
51-
<PropertiesTable properties={notNull(data).properties} />
50+
<Popup openOn="hover" let:props>
51+
<PropertiesTable properties={props} />
5252
</Popup>
5353
</LineLayer>
5454
</svelte:fragment>
@@ -61,8 +61,8 @@
6161
"circle-color": "black",
6262
}}
6363
>
64-
<Popup openOn="hover" let:data>
65-
<PropertiesTable properties={notNull(data).properties} />
64+
<Popup openOn="hover" let:props>
65+
<PropertiesTable properties={props} />
6666
</Popup>
6767
</CircleLayer>
6868
</GeoJSON>

‎web/src/NetworkMode.svelte

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<script lang="ts">
22
import type { Feature } from "geojson";
3-
import { FillLayer, GeoJSON, hoverStateFilter, Popup } from "svelte-maplibre";
4-
import { notNull } from "./common";
3+
import { FillLayer, GeoJSON, hoverStateFilter } from "svelte-maplibre";
4+
import { notNull, Popup } from "./common";
55
import ManageSavefiles from "./ManageSavefiles.svelte";
66
import ModalFilterLayer from "./ModalFilterLayer.svelte";
77
import SplitComponent from "./SplitComponent.svelte";
88
import { app, mode } from "./stores";
99
1010
// Note we do this to trigger a refresh when loading stuff
11-
$: gj = JSON.parse(notNull($app).toSavefile());
11+
$: gj = JSON.parse($app!.toSavefile());
1212
$: boundaryNames = gj.features
13-
.filter((f: Feature) => notNull(f.properties).kind == "boundary")
14-
.map((f: Feature) => notNull(f.properties).name);
13+
.filter((f: Feature) => f.properties!.kind == "boundary")
14+
.map((f: Feature) => f.properties!.name);
1515
1616
function pickNeighbourhood(name: string) {
1717
$app!.setCurrentNeighbourhood(name);
@@ -20,7 +20,7 @@
2020
2121
function deleteNeighbourhood(name: string) {
2222
$app!.deleteNeighbourhoodBoundary(name);
23-
gj = JSON.parse(notNull($app).toSavefile());
23+
gj = JSON.parse($app!.toSavefile());
2424
}
2525
2626
function newBoundary() {
@@ -90,8 +90,8 @@
9090
pickNeighbourhood(notNull(e.detail.features[0].properties).name)}
9191
hoverCursor="pointer"
9292
>
93-
<Popup openOn="hover" let:data>
94-
<p>{notNull(data).properties.name}</p>
93+
<Popup openOn="hover" let:props>
94+
<p>{props.name}</p>
9595
</Popup>
9696
</FillLayer>
9797
<ModalFilterLayer />

‎web/src/ViewShortcutsMode.svelte

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script lang="ts">
22
import type { FeatureCollection } from "geojson";
33
import { onDestroy, onMount } from "svelte";
4-
import { GeoJSON, LineLayer, Popup } from "svelte-maplibre";
5-
import { notNull } from "./common";
4+
import { GeoJSON, LineLayer } from "svelte-maplibre";
5+
import { notNull, Popup } from "./common";
66
import ModalFilterLayer from "./ModalFilterLayer.svelte";
77
import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
88
import SplitComponent from "./SplitComponent.svelte";
@@ -102,9 +102,7 @@
102102
onClickLine={(f) => choseRoad(notNull(f.properties).id)}
103103
>
104104
<div slot="line-popup">
105-
<Popup openOn="hover" let:data
106-
>{notNull(data).properties.shortcuts}</Popup
107-
>
105+
<Popup openOn="hover" let:props>{props.shortcuts}</Popup>
108106
</div>
109107
</RenderNeighbourhood>
110108
{:else if state.state == "chose-road"}

‎web/src/common/Popup.svelte

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script lang="ts">
2+
// Use this component instead of the one from svelte-maplibre, to more
3+
// conveniently get the properties of the topmost feature in a TS-friendly
4+
// way.
5+
import type { Feature } from "geojson";
6+
import { Popup } from "svelte-maplibre";
7+
8+
// TODO Maybe set openIfTopMost and other props, or pass them through
9+
export let openOn: "hover" | "click" = "hover";
10+
11+
function getProperties(features: Feature[] | null): { [name: string]: any } {
12+
if (!features) {
13+
console.log("A Popup with null features should be impossible");
14+
return {};
15+
}
16+
return features[0].properties ?? {};
17+
}
18+
</script>
19+
20+
<Popup {openOn} let:features>
21+
<slot props={getProperties(features)} />
22+
</Popup>

‎web/src/common/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export { default as Legend } from "./Legend.svelte";
99
export { default as Loading } from "./Loading.svelte";
1010
export { default as Modal } from "./Modal.svelte";
1111
export { default as OverpassSelector } from "./OverpassSelector.svelte";
12+
export { default as Popup } from "./Popup.svelte";
1213
export { default as PropertiesTable } from "./PropertiesTable.svelte";
1314

1415
export const isPolygon: ExpressionSpecification = [

‎web/src/edit/NeighbourhoodMode.svelte

+7-9
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
} from "geojson";
88
import type { MapMouseEvent } from "maplibre-gl";
99
import { onDestroy } from "svelte";
10-
import { GeoJSON, Popup, SymbolLayer } from "svelte-maplibre";
11-
import { notNull } from "../common";
10+
import { GeoJSON, SymbolLayer } from "svelte-maplibre";
11+
import { notNull, Popup } from "../common";
1212
import ManageSavefiles from "../ManageSavefiles.svelte";
1313
import RenderNeighbourhood from "../RenderNeighbourhood.svelte";
1414
import SplitComponent from "../SplitComponent.svelte";
@@ -211,13 +211,11 @@
211211
interactive={!addingFilter && !addingMultipleFilters}
212212
>
213213
<div slot="line-popup">
214-
<Popup openOn="hover" let:data
215-
><p>
216-
{notNull(data).properties.shortcuts} shortcuts through {notNull(
217-
data,
218-
).properties.name ?? "unnamed road"}
219-
</p></Popup
220-
>
214+
<Popup openOn="hover" let:props>
215+
<p>
216+
{props.shortcuts} shortcuts through {props.name ?? "unnamed road"}
217+
</p>
218+
</Popup>
221219
</div>
222220
</RenderNeighbourhood>
223221
<GeoJSON data={modalFilterGj} generateId>

0 commit comments

Comments
 (0)