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

fix: register custom event in HTMLElementEventMap to eliminate casts

Browse Source 
Augment HTMLElementEventMap with 'leaflet-register' so that
addEventListener('leaflet-register', handler) natively accepts
(e: LeafletRegisterEvent) => void, removing the need for
as EventListener casts in all 14 consumer components.
This commit is contained in:
Buddy 2026-06-07 22:27:23 -07:00
parent 4e1abdcc3d
commit a7b0df2616
15 changed files with 34 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/leaflet-circle-marker.ts
View File

@ -43,13 +43,12 @@ export class LeafletCircleMarker extends TypedBase {
buildOptions(this, PROPS, ['lat', 'lng']),
);
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
this.addEventListener('leaflet-register', this.#childHandler as EventListener);
this.addEventListener('leaflet-register', this.#childHandler);
registerWithParent(this, this.#obj);
}
disconnectedCallback() {
if (this.#childHandler)
this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
this.#children.clear();
this.#obj?.remove();
this.#obj = undefined;

5
src/components/leaflet-circle.ts
View File

@ -43,13 +43,12 @@ export class LeafletCircle extends TypedBase {
buildOptions(this, PROPS, ['lat', 'lng']),
);
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
this.addEventListener('leaflet-register', this.#childHandler as EventListener);
this.addEventListener('leaflet-register', this.#childHandler);
registerWithParent(this, this.#obj);
}
disconnectedCallback() {
if (this.#childHandler)
this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
this.#children.clear();
this.#obj?.remove();
this.#obj = undefined;

5
src/components/leaflet-feature-group.ts
View File

@ -18,13 +18,12 @@ export class LeafletFeatureGroup extends HTMLElement {
connectedCallback() {
this.#obj = new FeatureGroup([], buildOptions(this, {}));
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
this.addEventListener('leaflet-register', this.#childHandler as EventListener);
this.addEventListener('leaflet-register', this.#childHandler);
registerWithParent(this, this.#obj);
}
disconnectedCallback() {
if (this.#childHandler)
this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
for (const [el, entry] of this.#children) {
if (entry.type === 'popup') this.#obj?.unbindPopup();
else if (entry.type === 'tooltip') this.#obj?.unbindTooltip();

5
src/components/leaflet-geojson.ts
View File

@ -52,13 +52,12 @@ export class LeafletGeoJSON extends TypedBase {
);
this.#obj = new GeoJSON(data, { style: styleOpts as PathOptions });
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
this.addEventListener('leaflet-register', this.#childHandler as EventListener);
this.addEventListener('leaflet-register', this.#childHandler);
registerWithParent(this, this.#obj);
}
disconnectedCallback() {
if (this.#childHandler)
this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
for (const [el, entry] of this.#children) {
if (entry.type === 'popup') this.#obj?.unbindPopup();
else if (entry.type === 'tooltip') this.#obj?.unbindTooltip();

5
src/components/leaflet-image-overlay.ts
View File

@ -53,13 +53,12 @@ export class LeafletImageOverlay extends TypedBase {
buildOptions(this, PROPS, ['url', 'bounds']),
);
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
this.addEventListener('leaflet-register', this.#childHandler as EventListener);
this.addEventListener('leaflet-register', this.#childHandler);
registerWithParent(this, this.#obj);
}
disconnectedCallback() {
if (this.#childHandler)
this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
this.#children.clear();
this.#obj?.remove();
this.#obj = undefined;

5
src/components/leaflet-layer-group.ts
View File

@ -18,13 +18,12 @@ export class LeafletLayerGroup extends HTMLElement {
connectedCallback() {
this.#obj = new LayerGroup([], buildOptions(this, {}));
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
this.addEventListener('leaflet-register', this.#childHandler as EventListener);
this.addEventListener('leaflet-register', this.#childHandler);
registerWithParent(this, this.#obj);
}
disconnectedCallback() {
if (this.#childHandler)
this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
for (const [el, entry] of this.#children) {
if (entry.type === 'popup') this.#obj?.unbindPopup();
else if (entry.type === 'tooltip') this.#obj?.unbindTooltip();

5
src/components/leaflet-marker.ts
View File

@ -49,13 +49,12 @@ export class LeafletMarker extends TypedBase {
buildOptions(this, PROPS, ['lat', 'lng']),
);
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
this.addEventListener('leaflet-register', this.#childHandler as EventListener);
this.addEventListener('leaflet-register', this.#childHandler);
registerWithParent(this, this.#obj);
}
disconnectedCallback() {
if (this.#childHandler)
this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
this.#children.clear();
this.#obj?.remove();
this.#obj = undefined;

5
src/components/leaflet-polygon.ts
View File

@ -39,7 +39,7 @@ export class LeafletPolygon extends TypedBase {
connectedCallback() {
this.#obj = new Polygon(this.#getCoords(), buildOptions(this, PROPS));
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
this.addEventListener('leaflet-register', this.#childHandler as EventListener);
this.addEventListener('leaflet-register', this.#childHandler);
registerWithParent(this, this.#obj);
this.addEventListener('line-updated', this.#syncCoords);
@ -51,8 +51,7 @@ export class LeafletPolygon extends TypedBase {
this.#observer?.disconnect();
this.#observer = undefined;
this.removeEventListener('line-updated', this.#syncCoords);
if (this.#childHandler)
this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
this.#children.clear();
this.#obj?.remove();
this.#obj = undefined;

5
src/components/leaflet-polyline.ts
View File

@ -39,7 +39,7 @@ export class LeafletPolyline extends TypedBase {
connectedCallback() {
this.#obj = new Polyline(this.#getCoords(), buildOptions(this, PROPS));
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
this.addEventListener('leaflet-register', this.#childHandler as EventListener);
this.addEventListener('leaflet-register', this.#childHandler);
registerWithParent(this, this.#obj);
this.addEventListener('line-updated', this.#syncCoords);
@ -51,8 +51,7 @@ export class LeafletPolyline extends TypedBase {
this.#observer?.disconnect();
this.#observer = undefined;
this.removeEventListener('line-updated', this.#syncCoords);
if (this.#childHandler)
this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
this.#children.clear();
this.#obj?.remove();
this.#obj = undefined;

5
src/components/leaflet-rectangle.ts
View File

@ -38,13 +38,12 @@ export class LeafletRectangle extends TypedBase {
connectedCallback() {
this.#obj = new Rectangle(this.#parsedBounds(), buildOptions(this, PROPS, ['bounds']));
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
this.addEventListener('leaflet-register', this.#childHandler as EventListener);
this.addEventListener('leaflet-register', this.#childHandler);
registerWithParent(this, this.#obj);
}
disconnectedCallback() {
if (this.#childHandler)
this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
this.#children.clear();
this.#obj?.remove();
this.#obj = undefined;

5
src/components/leaflet-svg-overlay.ts
View File

@ -51,13 +51,12 @@ export class LeafletSVGOverlay extends TypedBase {
buildOptions(this, PROPS, ['bounds']),
);
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
this.addEventListener('leaflet-register', this.#childHandler as EventListener);
this.addEventListener('leaflet-register', this.#childHandler);
registerWithParent(this, this.#obj);
}
disconnectedCallback() {
if (this.#childHandler)
this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
this.#children.clear();
this.#obj?.remove();
this.#obj = undefined;

5
src/components/leaflet-tile-layer-wms.ts
View File

@ -50,13 +50,12 @@ export class LeafletTileLayerWMS extends TypedBase {
buildOptions(this, PROPS, ['url']) as Record<string, string>,
);
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
this.addEventListener('leaflet-register', this.#childHandler as EventListener);
this.addEventListener('leaflet-register', this.#childHandler);
registerWithParent(this, this.#obj);
}
disconnectedCallback() {
if (this.#childHandler)
this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
this.#children.clear();
this.#obj?.remove();
this.#obj = undefined;

5
src/components/leaflet-tile-layer.ts
View File

@ -46,13 +46,12 @@ export class LeafletTileLayer extends TypedBase {
const url = this.getAttribute('url') || '';
this.#obj = new TileLayer(url, buildOptions(this, PROPS, ['url']));
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
this.addEventListener('leaflet-register', this.#childHandler as EventListener);
this.addEventListener('leaflet-register', this.#childHandler);
registerWithParent(this, this.#obj);
}
disconnectedCallback() {
if (this.#childHandler)
this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
this.#children.clear();
this.#obj?.remove();
this.#obj = undefined;

5
src/components/leaflet-video-overlay.ts
View File

@ -54,13 +54,12 @@ export class LeafletVideoOverlay extends TypedBase {
buildOptions(this, PROPS, ['url', 'bounds']),
);
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
this.addEventListener('leaflet-register', this.#childHandler as EventListener);
this.addEventListener('leaflet-register', this.#childHandler);
registerWithParent(this, this.#obj);
}
disconnectedCallback() {
if (this.#childHandler)
this.removeEventListener('leaflet-register', this.#childHandler as EventListener);
if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
this.#children.clear();
this.#obj?.remove();
this.#obj = undefined;

6
src/core/register.ts
View File

@ -5,6 +5,12 @@ export type LeafletRegisterEvent = CustomEvent<{
element: HTMLElement;
}>;
declare global {
interface HTMLElementEventMap {
'leaflet-register': LeafletRegisterEvent;
}
}
export type ChildEntry = {
type: 'layer' | 'popup' | 'tooltip';
};