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

refactor: extract duplicate #num helper into standalone numAttr()

Browse Source 
Removes the identical private #num method from 5 components
(leaflet-circle, leaflet-circle-marker, leaflet-marker,
leaflet-popup, leaflet-tooltip). Replaces with numAttr(this, PROPS, name)
call to the new helper in utils.ts.
This commit is contained in:
Buddy 2026-06-08 22:32:25 -07:00
parent 566b8ea43c
commit c18829a0e3
6 changed files with 23 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { CircleMarker } from 'leaflet';
import { registerWithParent, buildOptions } from '../core/utils.js';
import { registerWithParent, buildOptions, numAttr } from '../core/utils.js';
import { withProps } from '../core/with-props.js';
import {
@ -29,7 +29,7 @@ export class LeafletCircleMarker extends withProps(HTMLElement, PROPS) {
connectedCallback() {
this.#obj = new CircleMarker(
[this.#num('lat'), this.#num('lng')],
[numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')],
buildOptions(this, PROPS, ['lat', 'lng']),
);
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
@ -47,20 +47,13 @@ export class LeafletCircleMarker extends withProps(HTMLElement, PROPS) {
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
if (!this.#obj) return;
if (name === 'lat' || name === 'lng') {
this.#obj.setLatLng([this.#num('lat'), this.#num('lng')]);
this.#obj.setLatLng([numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')]);
} else if (name === 'radius') {
this.#obj.setRadius(this.#num('radius'));
this.#obj.setRadius(numAttr(this, PROPS, 'radius'));
} else if (isPathStyleAttr(name)) {
updatePathStyle(this.#obj, name, val);
}
}
#num(name: string): number {
const v = this.getAttribute(name);
return v !== null
? Number(v)
: (PROPS[name as keyof typeof PROPS] as { default: number }).default;
}
}
customElements.define('leaflet-circle-marker', LeafletCircleMarker);

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

@ -1,5 +1,5 @@
import { Circle } from 'leaflet';
import { registerWithParent, buildOptions } from '../core/utils.js';
import { registerWithParent, buildOptions, numAttr } from '../core/utils.js';
import { withProps } from '../core/with-props.js';
import {
@ -29,7 +29,7 @@ export class LeafletCircle extends withProps(HTMLElement, PROPS) {
connectedCallback() {
this.#obj = new Circle(
[this.#num('lat'), this.#num('lng')],
[numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')],
buildOptions(this, PROPS, ['lat', 'lng']),
);
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
@ -47,20 +47,13 @@ export class LeafletCircle extends withProps(HTMLElement, PROPS) {
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
if (!this.#obj) return;
if (name === 'lat' || name === 'lng') {
this.#obj.setLatLng([this.#num('lat'), this.#num('lng')]);
this.#obj.setLatLng([numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')]);
} else if (name === 'radius') {
this.#obj.setRadius(this.#num('radius'));
this.#obj.setRadius(numAttr(this, PROPS, 'radius'));
} else if (isPathStyleAttr(name)) {
updatePathStyle(this.#obj, name, val);
}
}
#num(name: string): number {
const v = this.getAttribute(name);
return v !== null
? Number(v)
: (PROPS[name as keyof typeof PROPS] as { default: number }).default;
}
}
customElements.define('leaflet-circle', LeafletCircle);

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

@ -1,5 +1,5 @@
import { Marker } from 'leaflet';
import { registerWithParent, buildOptions, parseAttributeValue } from '../core/utils.js';
import { registerWithParent, buildOptions, numAttr, parseAttributeValue } from '../core/utils.js';
import { withProps } from '../core/with-props.js';
import {
@ -31,7 +31,7 @@ export class LeafletMarker extends withProps(HTMLElement, PROPS) {
connectedCallback() {
this.#obj = new Marker(
[this.#num('lat'), this.#num('lng')],
[numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')],
buildOptions(this, PROPS, ['lat', 'lng']),
);
this.#obj.on('dragend', this.#onDragEnd);
@ -51,7 +51,7 @@ export class LeafletMarker extends withProps(HTMLElement, PROPS) {
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
if (!this.#obj || this.#syncing) return;
if (name === 'lat' || name === 'lng') {
this.#obj.setLatLng([this.#num('lat'), this.#num('lng')]);
this.#obj.setLatLng([numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')]);
} else if (name === 'draggable') {
if (val !== null) this.#obj.dragging?.enable();
else this.#obj.dragging?.disable();
@ -79,13 +79,6 @@ export class LeafletMarker extends withProps(HTMLElement, PROPS) {
this.setAttribute('lng', String(pos.lng));
this.#syncing = false;
};
#num(name: string): number {
const v = this.getAttribute(name);
return v !== null
? Number(v)
: (PROPS[name as keyof typeof PROPS] as { default: number }).default;
}
}
customElements.define('leaflet-marker', LeafletMarker);

13
src/components/leaflet-popup.ts
View File

@ -1,5 +1,5 @@
import { Popup } from 'leaflet';
import { registerWithParent, buildOptions } from '../core/utils.js';
import { registerWithParent, buildOptions, numAttr } from '../core/utils.js';
import { withProps } from '../core/with-props.js';
import type { PropDef } from '../types/props.js';
@ -25,7 +25,7 @@ export class LeafletPopup extends withProps(HTMLElement, PROPS) {
content: this.innerHTML,
});
if (this.hasAttribute('lat') && this.hasAttribute('lng')) {
this.#obj.setLatLng([this.#num('lat'), this.#num('lng')]);
this.#obj.setLatLng([numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')]);
}
registerWithParent(this, this.#obj);
@ -49,16 +49,9 @@ export class LeafletPopup extends withProps(HTMLElement, PROPS) {
attributeChangedCallback(name: string) {
if (!this.#obj) return;
if (name === 'lat' || name === 'lng') {
this.#obj.setLatLng([this.#num('lat'), this.#num('lng')]);
this.#obj.setLatLng([numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')]);
}
}
#num(name: string): number {
const v = this.getAttribute(name);
return v !== null
? Number(v)
: (PROPS[name as keyof typeof PROPS] as { default: number }).default;
}
}
customElements.define('leaflet-popup', LeafletPopup);

13
src/components/leaflet-tooltip.ts
View File

@ -1,5 +1,5 @@
import { Tooltip } from 'leaflet';
import { registerWithParent, buildOptions } from '../core/utils.js';
import { registerWithParent, buildOptions, numAttr } from '../core/utils.js';
import { withProps } from '../core/with-props.js';
import type { PropDef } from '../types/props.js';
@ -25,7 +25,7 @@ export class LeafletTooltip extends withProps(HTMLElement, PROPS) {
content: this.innerHTML,
});
if (this.hasAttribute('lat') && this.hasAttribute('lng')) {
this.#obj.setLatLng([this.#num('lat'), this.#num('lng')]);
this.#obj.setLatLng([numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')]);
}
registerWithParent(this, this.#obj);
@ -49,16 +49,9 @@ export class LeafletTooltip extends withProps(HTMLElement, PROPS) {
attributeChangedCallback(name: string) {
if (!this.#obj) return;
if (name === 'lat' || name === 'lng') {
this.#obj.setLatLng([this.#num('lat'), this.#num('lng')]);
this.#obj.setLatLng([numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')]);
}
}
#num(name: string): number {
const v = this.getAttribute(name);
return v !== null
? Number(v)
: (PROPS[name as keyof typeof PROPS] as { default: number }).default;
}
}
customElements.define('leaflet-tooltip', LeafletTooltip);

6
src/core/utils.ts
View File

@ -38,6 +38,12 @@ export function definePropAccessors(proto: object, props: Record<string, PropDef
}
}
export function numAttr(el: HTMLElement, props: Record<string, PropDef>, name: string): number {
const v = el.getAttribute(name);
if (v !== null) return Number(v);
return (props[name] as { default: number }).default;
}
export function buildOptions(
el: HTMLElement,
props: Record<string, PropDef>,