fix(print-layout): improve atlas feature framing #1783
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| /** Temporary inverted-fill mask for the active Print Layout atlas feature. */ | ||
| import { buildInvertedMask } from "@geolibre/map/derived-geometry"; | ||
| import type { Feature, FeatureCollection, MultiPolygon, Polygon } from "geojson"; | ||
| import type { GeoJSONSource, Map as MapLibreMap } from "maplibre-gl"; | ||
|
|
||
| const SOURCE_ID = "geolibre-print-atlas-mask"; | ||
| const FILL_LAYER_ID = "geolibre-print-atlas-mask-fill"; | ||
| const featureCollections = new WeakMap< | ||
| Feature<Polygon | MultiPolygon>, | ||
| FeatureCollection<Polygon | MultiPolygon> | ||
| >(); | ||
|
|
||
| /** Remove the atlas mask source and layer, if present. */ | ||
| export function clearAtlasFeatureMask(map: MapLibreMap): void { | ||
| if (map.getLayer(FILL_LAYER_ID)) map.removeLayer(FILL_LAYER_ID); | ||
| if (map.getSource(SOURCE_ID)) map.removeSource(SOURCE_ID); | ||
| } | ||
|
|
||
| /** | ||
| * Show a translucent inverted fill around one polygon atlas feature. | ||
| * | ||
| * @param map - MapLibre map used by the Print Layout capture. | ||
| * @param feature - Current coverage feature. | ||
| * @returns Whether a polygon mask could be rendered. | ||
| */ | ||
| export function showAtlasFeatureMask(map: MapLibreMap, feature: Feature | undefined): boolean { | ||
| if (feature?.geometry?.type !== "Polygon" && feature?.geometry?.type !== "MultiPolygon") { | ||
| clearAtlasFeatureMask(map); | ||
| return false; | ||
| } | ||
| const polygonFeature = feature as Feature<Polygon | MultiPolygon>; | ||
| let collection = featureCollections.get(polygonFeature); | ||
| if (!collection) { | ||
| collection = { | ||
| type: "FeatureCollection", | ||
| features: [polygonFeature], | ||
| }; | ||
| featureCollections.set(polygonFeature, collection); | ||
| } | ||
| const mask = buildInvertedMask(collection); | ||
| if (!mask) { | ||
| clearAtlasFeatureMask(map); | ||
| return false; | ||
| } | ||
| const source = map.getSource(SOURCE_ID) as GeoJSONSource | undefined; | ||
| if (source) source.setData(mask); | ||
| else map.addSource(SOURCE_ID, { type: "geojson", data: mask }); | ||
| if (!map.getLayer(FILL_LAYER_ID)) { | ||
| map.addLayer({ | ||
|
Contributor
There was a problem hiding this comment.
Confidence: medium — this is a plausible visual regression for the graticule + polygon-mask combination, but I haven't run the app to confirm the labels actually fall in the masked region. |
||
| id: FILL_LAYER_ID, | ||
| type: "fill", | ||
| source: SOURCE_ID, | ||
| metadata: { "geolibre:internal": true }, | ||
| paint: { | ||
| "fill-color": "#ffffff", | ||
|
Comment on lines
+54
to
+55
Contributor
There was a problem hiding this comment. The mask fill is a hardcoded Confidence: low — this may well be an intentional, theme-independent print-composition choice (print output is typically a light background regardless of app theme). |
||
| "fill-opacity": 0.7, | ||
| "fill-outline-color": "rgba(0, 0, 0, 0)", | ||
| }, | ||
| }); | ||
| } | ||
| return true; | ||
| } | ||
|
Contributor
There was a problem hiding this comment. Test coverage gap (low-medium confidence). This new module has no accompanying test file. The codebase already has a precedent for testing this exact kind of MapLibre-mutating code with a fake |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| import assert from "node:assert/strict"; | ||
| import { describe, it } from "node:test"; | ||
| import type { Feature, Point, Polygon } from "geojson"; | ||
|
|
||
| import { | ||
| clearAtlasFeatureMask, | ||
| showAtlasFeatureMask, | ||
| } from "../apps/geolibre-desktop/src/lib/print-atlas-mask"; | ||
|
|
||
| interface FakeSource { | ||
| data: unknown; | ||
| setData: (data: unknown) => void; | ||
| } | ||
|
|
||
| class FakeMap { | ||
| layers = new Map<string, unknown>(); | ||
| sources = new Map<string, FakeSource>(); | ||
|
|
||
| getLayer(id: string) { | ||
| return this.layers.get(id); | ||
| } | ||
|
|
||
| addLayer(layer: { id: string }) { | ||
| this.layers.set(layer.id, layer); | ||
| } | ||
|
|
||
| removeLayer(id: string) { | ||
| this.layers.delete(id); | ||
| } | ||
|
|
||
| getSource(id: string) { | ||
| return this.sources.get(id); | ||
| } | ||
|
|
||
| addSource(id: string, source: { data: unknown }) { | ||
| const fakeSource: FakeSource = { | ||
| data: source.data, | ||
| setData: (data) => { | ||
| fakeSource.data = data; | ||
| }, | ||
| }; | ||
| this.sources.set(id, fakeSource); | ||
| } | ||
|
|
||
| removeSource(id: string) { | ||
| this.sources.delete(id); | ||
| } | ||
| } | ||
|
|
||
| const polygon: Feature<Polygon> = { | ||
| type: "Feature", | ||
| properties: { name: "coverage" }, | ||
| geometry: { | ||
| type: "Polygon", | ||
| coordinates: [ | ||
| [ | ||
| [0, 0], | ||
| [2, 0], | ||
| [2, 2], | ||
| [0, 2], | ||
| [0, 0], | ||
| ], | ||
| ], | ||
| }, | ||
| }; | ||
|
|
||
| describe("atlas feature mask", () => { | ||
| it("adds and clears the temporary mask source and layer", () => { | ||
| const map = new FakeMap(); | ||
| assert.equal(showAtlasFeatureMask(map as never, polygon), true); | ||
| assert.equal(map.layers.size, 1); | ||
| assert.equal(map.sources.size, 1); | ||
|
|
||
| clearAtlasFeatureMask(map as never); | ||
| assert.equal(map.layers.size, 0); | ||
| assert.equal(map.sources.size, 0); | ||
| }); | ||
|
|
||
| it("reuses the derived mask when the same feature is shown again", () => { | ||
| const map = new FakeMap(); | ||
| showAtlasFeatureMask(map as never, polygon); | ||
| const source = map.sources.get("geolibre-print-atlas-mask"); | ||
| const firstMask = source?.data; | ||
|
|
||
| showAtlasFeatureMask(map as never, polygon); | ||
| assert.strictEqual(source?.data, firstMask); | ||
| assert.equal(map.layers.size, 1); | ||
| assert.equal(map.sources.size, 1); | ||
| }); | ||
|
|
||
| it("rejects a non-polygon feature and removes any previous mask", () => { | ||
| const map = new FakeMap(); | ||
| showAtlasFeatureMask(map as never, polygon); | ||
| const point: Feature<Point> = { | ||
| type: "Feature", | ||
| properties: {}, | ||
| geometry: { type: "Point", coordinates: [1, 1] }, | ||
| }; | ||
|
|
||
| assert.equal(showAtlasFeatureMask(map as never, point), false); | ||
| assert.equal(map.layers.size, 0); | ||
| assert.equal(map.sources.size, 0); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Minor style nit: these two new strings use a curly apostrophe (
’) in "l’entité"/"l’atlas", while the rest of this file consistently uses a straight apostrophe ('), e.g.filterToPageHintright above uses "S'applique", "dataChart.noNumericFields" uses "n'a aucun", etc. Same foratlas.maskOutside/maskOutsideHintbelow. Worth normalizing for consistency with the rest of the catalog.Confidence: low — purely cosmetic, doesn't affect functionality.