Call the layer setup unconditionally, and stop the figure being crushed
Some checks are pending
Deploy to GitHub Pages / build (push) Waiting to run
Deploy to GitHub Pages / deploy (push) Blocked by required conditions

The guard added last time is what kept this broken. createBoardMap resolves only
after awaiting the load event, so by the time the component runs, load has fired.
The guard asked map.loaded() — which does not mean "the load event fired" but
"the style and every tile are loaded" — and the basemap tiles were still
arriving. It returned false, took the else branch, and registered a handler for
an event that had already happened. A check added for a hypothetical future
engine broke the only case that exists.

Defensive code that changes behaviour is not defensive. If a check is ever wanted
here it is isStyleLoaded(), which is true at this point; loaded() answers a
different question than the one being asked.

The figure was crushed rather than unstyled. The zero flex-basis shipped
correctly and the figure was still 39 pixels wide: a basis of zero lets it grow
from nothing, but min-width:0 also lets it be squeezed to nothing, and the
decoder card's own content width wins that contest. The figure now refuses to go
below a usable size and the card shrinks or scrolls instead, because the chart is
the main view and the legend explains it.
This commit is contained in:
Doxa Maps 2026-09-28 20:24:29 +00:00
parent 182611c94b
commit 82b2e2aa5a
13 changed files with 36 additions and 15 deletions

View file

@ -86,7 +86,15 @@ onMounted(async () => {
font: labelFont,
}))
}
if (map.loaded()) setup(); else map.once('load', setup)
// ★ CALLED UNCONDITIONALLY, AND THE GUARD THAT USED TO BE HERE IS WHY THIS WAS BROKEN TWICE.
// createBoardMap only resolves after `await map.once('load')`, so by here the event HAS fired.
// The previous line read `map.loaded() ? setup() : map.once('load', setup)` — but loaded()
// does not mean "the load event fired", it means "the style AND every tile are loaded", and
// the basemap tiles were still arriving. So it returned false, took the else branch, and
// registered a handler for an event that had already happened. A guard added for a
// hypothetical future engine broke the only case that actually exists.
// If a defensive check is ever wanted here it is isStyleLoaded(), not loaded().
setup()
} catch (e) {
failed.value = String(e?.message || e)
}

View file

@ -132,9 +132,14 @@ useShadowStyles(
// the legend beside it takes the column. rega measured the figure at 39px across while the
// decoder card had the rest. Growing from zero makes the figure take the remaining space
// whatever it happens to contain.
'.gcs-fig{position:relative;flex:1 1 0%;align-self:stretch;min-width:0;min-height:240px;' +
// min-width is a FLOOR, not 0. The shipped CSS was right and the figure was still 39px wide:
// flex:1 1 0% lets it GROW from nothing, but min-width:0 also lets it be CRUSHED to nothing,
// and the decoder card's own content width wins that contest. The figure now refuses to go
// below a usable size and the card shrinks or scrolls instead — the chart is the main view.
'.gcs-fig{position:relative;flex:1 1 0%;align-self:stretch;min-width:280px;min-height:240px;' +
'display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}' +
'.gcs-aside{flex:0 1 340px;min-width:0;min-height:0;overflow:auto;display:flex;align-items:flex-start}' +
'.gcs-aside .grl{min-width:0}' +
'.gcs-legend-toggle{width:100%;padding:6px 10px;border:1px solid #d1d4cd;border-radius:8px;' +
'background:#fff;color:#3b463d;font:inherit;font-size:12.5px;cursor:pointer;text-align:start}' +
'@media (max-width:900px){.gcs{flex-direction:column;overflow:auto}' +

View file

@ -103,7 +103,15 @@ onMounted(async () => {
}))
ready.value = true
}
if (map.loaded()) setup(); else map.once('load', setup)
// ★ CALLED UNCONDITIONALLY, AND THE GUARD THAT USED TO BE HERE IS WHY THIS WAS BROKEN TWICE.
// createBoardMap only resolves after `await map.once('load')`, so by here the event HAS fired.
// The previous line read `map.loaded() ? setup() : map.once('load', setup)` — but loaded()
// does not mean "the load event fired", it means "the style AND every tile are loaded", and
// the basemap tiles were still arriving. So it returned false, took the else branch, and
// registered a handler for an event that had already happened. A guard added for a
// hypothetical future engine broke the only case that actually exists.
// If a defensive check is ever wanted here it is isStyleLoaded(), not loaded().
setup()
} catch (e) {
// FAILS VISIBLY: an empty whiteboard is indistinguishable from a chart with no groups.
failed.value = String(e?.message || e)

View file

@ -615,7 +615,7 @@
"bundle": "gospel-internet",
"scriptUrl": "./gospel-internet/gospel-internet.js",
"output": "dx-maps/gospel-internet/gospel-internet.js",
"integrity": "sha384-uO9AAvtmwvTpQ6t6lc2Vfz7mIdJ7CelCSoLjz9SAMkXFm4/Cmfh4Xn5vOYCmbZNM",
"integrity": "sha384-pUPKyPwSUmuPNnaWk/PmZhfH1oKiUBeHeiUqX6X9YOhQppNqP8fDWMJGxBJMUUZX",
"elements": [
"gospel-internet-board"
],
@ -635,7 +635,7 @@
"scriptUrl": "./gospel-internet/gospel-internet.js",
"embed": {
"iframe": "<iframe src=\"./gospel-internet/board/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./gospel-internet/gospel-internet.js\" integrity=\"sha384-uO9AAvtmwvTpQ6t6lc2Vfz7mIdJ7CelCSoLjz9SAMkXFm4/Cmfh4Xn5vOYCmbZNM\" crossorigin=\"anonymous\"></script>\n<!-- provider: \"maplibre\" is the default; change it to \"mapbox\" and fill tk to use Mapbox. -->\n<gospel-internet-board profile-config='{\"profile\":\"board\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></gospel-internet-board>"
"script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./gospel-internet/gospel-internet.js\" integrity=\"sha384-pUPKyPwSUmuPNnaWk/PmZhfH1oKiUBeHeiUqX6X9YOhQppNqP8fDWMJGxBJMUUZX\" crossorigin=\"anonymous\"></script>\n<!-- provider: \"maplibre\" is the default; change it to \"mapbox\" and fill tk to use Mapbox. -->\n<gospel-internet-board profile-config='{\"profile\":\"board\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></gospel-internet-board>"
},
"instances": [
{

View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-uO9AAvtmwvTpQ6t6lc2Vfz7mIdJ7CelCSoLjz9SAMkXFm4/Cmfh4Xn5vOYCmbZNM" crossorigin="anonymous"></script>
<script src="../../gospel-internet.js" integrity="sha384-pUPKyPwSUmuPNnaWk/PmZhfH1oKiUBeHeiUqX6X9YOhQppNqP8fDWMJGxBJMUUZX" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../gospel-internet.js" integrity="sha384-uO9AAvtmwvTpQ6t6lc2Vfz7mIdJ7CelCSoLjz9SAMkXFm4/Cmfh4Xn5vOYCmbZNM" crossorigin="anonymous"></script>
<script src="../gospel-internet.js" integrity="sha384-pUPKyPwSUmuPNnaWk/PmZhfH1oKiUBeHeiUqX6X9YOhQppNqP8fDWMJGxBJMUUZX" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-uO9AAvtmwvTpQ6t6lc2Vfz7mIdJ7CelCSoLjz9SAMkXFm4/Cmfh4Xn5vOYCmbZNM" crossorigin="anonymous"></script>
<script src="../../gospel-internet.js" integrity="sha384-pUPKyPwSUmuPNnaWk/PmZhfH1oKiUBeHeiUqX6X9YOhQppNqP8fDWMJGxBJMUUZX" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-uO9AAvtmwvTpQ6t6lc2Vfz7mIdJ7CelCSoLjz9SAMkXFm4/Cmfh4Xn5vOYCmbZNM" crossorigin="anonymous"></script>
<script src="../../gospel-internet.js" integrity="sha384-pUPKyPwSUmuPNnaWk/PmZhfH1oKiUBeHeiUqX6X9YOhQppNqP8fDWMJGxBJMUUZX" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-uO9AAvtmwvTpQ6t6lc2Vfz7mIdJ7CelCSoLjz9SAMkXFm4/Cmfh4Xn5vOYCmbZNM" crossorigin="anonymous"></script>
<script src="../../gospel-internet.js" integrity="sha384-pUPKyPwSUmuPNnaWk/PmZhfH1oKiUBeHeiUqX6X9YOhQppNqP8fDWMJGxBJMUUZX" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-uO9AAvtmwvTpQ6t6lc2Vfz7mIdJ7CelCSoLjz9SAMkXFm4/Cmfh4Xn5vOYCmbZNM" crossorigin="anonymous"></script>
<script src="../../gospel-internet.js" integrity="sha384-pUPKyPwSUmuPNnaWk/PmZhfH1oKiUBeHeiUqX6X9YOhQppNqP8fDWMJGxBJMUUZX" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-uO9AAvtmwvTpQ6t6lc2Vfz7mIdJ7CelCSoLjz9SAMkXFm4/Cmfh4Xn5vOYCmbZNM" crossorigin="anonymous"></script>
<script src="../../gospel-internet.js" integrity="sha384-pUPKyPwSUmuPNnaWk/PmZhfH1oKiUBeHeiUqX6X9YOhQppNqP8fDWMJGxBJMUUZX" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

File diff suppressed because one or more lines are too long

View file

@ -615,7 +615,7 @@
"bundle": "gospel-internet",
"scriptUrl": "./gospel-internet/gospel-internet.js",
"output": "dx-maps/gospel-internet/gospel-internet.js",
"integrity": "sha384-uO9AAvtmwvTpQ6t6lc2Vfz7mIdJ7CelCSoLjz9SAMkXFm4/Cmfh4Xn5vOYCmbZNM",
"integrity": "sha384-pUPKyPwSUmuPNnaWk/PmZhfH1oKiUBeHeiUqX6X9YOhQppNqP8fDWMJGxBJMUUZX",
"elements": [
"gospel-internet-board"
],
@ -635,7 +635,7 @@
"scriptUrl": "./gospel-internet/gospel-internet.js",
"embed": {
"iframe": "<iframe src=\"./gospel-internet/board/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./gospel-internet/gospel-internet.js\" integrity=\"sha384-uO9AAvtmwvTpQ6t6lc2Vfz7mIdJ7CelCSoLjz9SAMkXFm4/Cmfh4Xn5vOYCmbZNM\" crossorigin=\"anonymous\"></script>\n<!-- provider: \"maplibre\" is the default; change it to \"mapbox\" and fill tk to use Mapbox. -->\n<gospel-internet-board profile-config='{\"profile\":\"board\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></gospel-internet-board>"
"script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./gospel-internet/gospel-internet.js\" integrity=\"sha384-pUPKyPwSUmuPNnaWk/PmZhfH1oKiUBeHeiUqX6X9YOhQppNqP8fDWMJGxBJMUUZX\" crossorigin=\"anonymous\"></script>\n<!-- provider: \"maplibre\" is the default; change it to \"mapbox\" and fill tk to use Mapbox. -->\n<gospel-internet-board profile-config='{\"profile\":\"board\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></gospel-internet-board>"
},
"instances": [
{