lib/leaflet-components
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

refactor(leaflet-map): rename syncFit -> applyFit

Browse Source 
Mirrors the sibling applyCss(): both run on connect and on every relevant
attribute change. The prop set-handler that calls it becomes reapplyFit, the
same relinkCss -> applyCss shape.
This commit is contained in:
Buddy 2026-09-09 09:59:00 -07:00
parent cd2c8d0fc5
commit 36e1f5fe49
1 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/elements/leaflet-map.ts
View File

@ -42,13 +42,13 @@ function relinkCss(_map: LMap, _value: string, el: HTMLElement): void {
}
interface FitHost extends HTMLElement {
syncFit(): void;
applyFit(): void;
}
// The fit-* attributes aren't Leaflet options either: they ask the element to
// frame every point/bounds layer itself. Any change just re-runs that.
function applyFit(_map: LMap, _value: unknown, el: HTMLElement): void {
(el as FitHost).syncFit();
function reapplyFit(_map: LMap, _value: unknown, el: HTMLElement): void {
(el as FitHost).applyFit();
}
// Anything with a position we can fold into a bounding box -- markers,
@ -197,16 +197,16 @@ const PROPS: {
cssIntegrity: positional(str(DEFAULT_CSS_INTEGRITY, { set: relinkCss })),
cssCrossorigin: positional(str('', { set: relinkCss })),
// Not Leaflet options -- see syncFit() below. With `fit-to-markers` present
// Not Leaflet options -- see applyFit() below. With `fit-to-markers` present
// the map ignores lat/lng/zoom and frames every point/bounds layer that has
// registered. It reframes only when a new component registers (initial load
// and later additions) -- panning, zooming, opening a popup and removing a
// marker all leave the view untouched. `fit-padding` is the pixel gutter
// kept around the bounds; `fit-max-zoom` caps how far it zooms in (useful
// when a single marker would otherwise snap to max zoom).
fitToMarkers: positional(bool<LMap>(false, { set: applyFit })),
fitPadding: positional(num<LMap>(20, { set: applyFit })),
fitMaxZoom: positional(num<LMap>(Infinity, { set: applyFit })),
fitToMarkers: positional(bool<LMap>(false, { set: reapplyFit })),
fitPadding: positional(num<LMap>(20, { set: reapplyFit })),
fitMaxZoom: positional(num<LMap>(Infinity, { set: reapplyFit })),
};
const Base: LeafletElementConstructor<LMap, typeof PROPS> = WithProps(PROPS, { attach: 'none' });
@ -217,7 +217,7 @@ const Base: LeafletElementConstructor<LMap, typeof PROPS> = WithProps(PROPS, { a
* CSS `<link>`), runs a `ResizeObserver` → `invalidateSize()`, and treats its
* `css-*` attributes as describing the shadow stylesheet. With `fit-to-markers`
* set it frames every registered point/bounds layer instead of honouring
* `lat`/`lng`/`zoom` — see `syncFit()`.
* `lat`/`lng`/`zoom` — see `applyFit()`.
*/
export default class LeafletMapElement extends Base {
declare readonly leafletObject?: LMap;
@ -251,7 +251,7 @@ export default class LeafletMapElement extends Base {
this.addEventListener('leaflet-add-layer', this.#onAddLayer);
this.addEventListener('leaflet-remove-layer', this.#onRemoveLayer);
this.syncFit();
this.applyFit();
}
disconnectedCallback(): void {
@ -303,11 +303,12 @@ export default class LeafletMapElement extends Base {
Icon.Default.imagePath = url?.replace(/\/[^/]+$/u, '/images/');
}
// Called on connect and whenever a fit-* attribute changes. Records whether
// framing is on (read by #onRegister) and requests an immediate (re)frame
// when it is. No Leaflet event subscriptions: the only reframe trigger is a
// new component registering -- see #onRegister.
syncFit(): void {
// Called on connect and whenever a fit-* attribute changes -- the sibling of
// applyCss() above. Records whether framing is on (read by #onRegister) and
// requests an immediate (re)frame when it is. No Leaflet event
// subscriptions: the only reframe trigger is a new component registering --
// see #onRegister.
applyFit(): void {
if (!this.leafletObject) return;
this.#fitActive = this.fitToMarkers;
if (this.#fitActive) this.#scheduleFit();