diff --git a/src/elements/leaflet-map.ts b/src/elements/leaflet-map.ts index a184ae7..42472bc 100644 --- a/src/elements/leaflet-map.ts +++ b/src/elements/leaflet-map.ts @@ -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(false, { set: applyFit })), - fitPadding: positional(num(20, { set: applyFit })), - fitMaxZoom: positional(num(Infinity, { set: applyFit })), + fitToMarkers: positional(bool(false, { set: reapplyFit })), + fitPadding: positional(num(20, { set: reapplyFit })), + fitMaxZoom: positional(num(Infinity, { set: reapplyFit })), }; const Base: LeafletElementConstructor = WithProps(PROPS, { attach: 'none' }); @@ -217,7 +217,7 @@ const Base: LeafletElementConstructor = WithProps(PROPS, { a * CSS ``), 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();