Call the layer setup unconditionally, and stop the figure being crushed
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:
parent
182611c94b
commit
82b2e2aa5a
13 changed files with 36 additions and 15 deletions
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}' +
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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": [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -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": [
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in a new issue