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

refactor: extract #parsedBounds into parseBoundsAttr helper

Browse Source 
Replaces the identical private #parsedBounds method in rectangle,
image-overlay, video-overlay, and svg-overlay with a call to
parseBoundsAttr(el) from utils.ts. Removes 4 x 5 = 20 lines
of method definitions.
This commit is contained in:
Buddy 2026-06-08 22:51:36 -07:00
parent e2752aa7e0
commit 96b48a6ae2
5 changed files with 22 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { ImageOverlay, LatLngBounds, LatLngBoundsExpression, LatLngExpression } from 'leaflet';
import { buildOptions, parseAttributeValue } from '../core/utils.js';
import { ImageOverlay, LatLngBounds, LatLngExpression } from 'leaflet';
import { buildOptions, parseAttributeValue, parseBoundsAttr } from '../core/utils.js';
import { withProps } from '../core/with-props.js';
import { registerChildren, unregisterChildren } from '../core/register.js';
@ -28,7 +28,7 @@ export class LeafletImageOverlay extends withProps(HTMLElement, PROPS) {
const url = this.getAttribute('url') || '';
this.#obj = new ImageOverlay(
url,
this.#parsedBounds(),
parseBoundsAttr(this),
buildOptions(this, PROPS, ['url', 'bounds']),
);
registerChildren(this, this.#obj);
@ -45,7 +45,7 @@ export class LeafletImageOverlay extends withProps(HTMLElement, PROPS) {
if (name === 'url') {
if (val) this.#obj.setUrl(val);
} else if (name === 'bounds') {
this.#obj.setBounds(new LatLngBounds(this.#parsedBounds() as LatLngExpression[]));
this.#obj.setBounds(new LatLngBounds(parseBoundsAttr(this) as LatLngExpression[]));
} else if (name === 'alt') {
const el = this.#obj.getElement();
if (el) (el as HTMLImageElement).alt = val ?? '';
@ -61,11 +61,6 @@ export class LeafletImageOverlay extends withProps(HTMLElement, PROPS) {
}
}
}
#parsedBounds(): LatLngBoundsExpression {
const raw = this.getAttribute('bounds');
return raw ? (JSON.parse(raw) as LatLngBoundsExpression) : [];
}
}
customElements.define('leaflet-image-overlay', LeafletImageOverlay);

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

@ -1,5 +1,5 @@
import { Rectangle, LatLngBoundsExpression } from 'leaflet';
import { buildOptions } from '../core/utils.js';
import { Rectangle } from 'leaflet';
import { buildOptions, parseBoundsAttr } from '../core/utils.js';
import { withProps } from '../core/with-props.js';
import { registerChildren, unregisterChildren } from '../core/register.js';
@ -20,7 +20,7 @@ export class LeafletRectangle extends withProps(HTMLElement, PROPS) {
#obj?: Rectangle;
connectedCallback() {
this.#obj = new Rectangle(this.#parsedBounds(), buildOptions(this, PROPS, ['bounds']));
this.#obj = new Rectangle(parseBoundsAttr(this), buildOptions(this, PROPS, ['bounds']));
registerChildren(this, this.#obj);
}
@ -33,16 +33,11 @@ export class LeafletRectangle extends withProps(HTMLElement, PROPS) {
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
if (!this.#obj) return;
if (name === 'bounds') {
this.#obj.setBounds(this.#parsedBounds());
this.#obj.setBounds(parseBoundsAttr(this));
} else if (isPathStyleAttr(name)) {
updatePathStyle(this.#obj, name, val);
}
}
#parsedBounds(): LatLngBoundsExpression {
const raw = this.getAttribute('bounds');
return raw ? (JSON.parse(raw) as LatLngBoundsExpression) : [];
}
}
customElements.define('leaflet-rectangle', LeafletRectangle);

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

@ -1,5 +1,5 @@
import { SVGOverlay, LatLngBounds, LatLngBoundsExpression, LatLngExpression } from 'leaflet';
import { buildOptions, parseAttributeValue } from '../core/utils.js';
import { SVGOverlay, LatLngBounds, LatLngExpression } from 'leaflet';
import { buildOptions, parseAttributeValue, parseBoundsAttr } from '../core/utils.js';
import { withProps } from '../core/with-props.js';
import { registerChildren, unregisterChildren } from '../core/register.js';
@ -26,7 +26,7 @@ export class LeafletSVGOverlay extends withProps(HTMLElement, PROPS) {
const dummy = !svg ? document.createElementNS('http://www.w3.org/2000/svg', 'svg') : undefined;
this.#obj = new SVGOverlay(
svg ?? dummy!,
this.#parsedBounds(),
parseBoundsAttr(this),
buildOptions(this, PROPS, ['bounds']),
);
registerChildren(this, this.#obj);
@ -41,7 +41,7 @@ export class LeafletSVGOverlay extends withProps(HTMLElement, PROPS) {
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
if (!this.#obj) return;
if (name === 'bounds') {
this.#obj.setBounds(new LatLngBounds(this.#parsedBounds() as LatLngExpression[]));
this.#obj.setBounds(new LatLngBounds(parseBoundsAttr(this) as LatLngExpression[]));
} else {
const propName = PROP_BY_ATTR.get(name);
if (!propName) return;
@ -54,11 +54,6 @@ export class LeafletSVGOverlay extends withProps(HTMLElement, PROPS) {
}
}
}
#parsedBounds(): LatLngBoundsExpression {
const raw = this.getAttribute('bounds');
return raw ? (JSON.parse(raw) as LatLngBoundsExpression) : [];
}
}
customElements.define('leaflet-svg-overlay', LeafletSVGOverlay);

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

@ -1,5 +1,5 @@
import { VideoOverlay, LatLngBounds, LatLngBoundsExpression, LatLngExpression } from 'leaflet';
import { buildOptions, parseAttributeValue } from '../core/utils.js';
import { VideoOverlay, LatLngBounds, LatLngExpression } from 'leaflet';
import { buildOptions, parseAttributeValue, parseBoundsAttr } from '../core/utils.js';
import { withProps } from '../core/with-props.js';
import { registerChildren, unregisterChildren } from '../core/register.js';
@ -29,7 +29,7 @@ export class LeafletVideoOverlay extends withProps(HTMLElement, PROPS) {
const url = this.getAttribute('url') || '';
this.#obj = new VideoOverlay(
url,
this.#parsedBounds(),
parseBoundsAttr(this),
buildOptions(this, PROPS, ['url', 'bounds']),
);
registerChildren(this, this.#obj);
@ -46,7 +46,7 @@ export class LeafletVideoOverlay extends withProps(HTMLElement, PROPS) {
if (name === 'url') {
if (val) this.#obj.setUrl(val);
} else if (name === 'bounds') {
this.#obj.setBounds(new LatLngBounds(this.#parsedBounds() as LatLngExpression[]));
this.#obj.setBounds(new LatLngBounds(parseBoundsAttr(this) as LatLngExpression[]));
} else if (
name === 'loop' ||
name === 'autoplay' ||
@ -73,11 +73,6 @@ export class LeafletVideoOverlay extends withProps(HTMLElement, PROPS) {
}
}
#parsedBounds(): LatLngBoundsExpression {
const raw = this.getAttribute('bounds');
return raw ? (JSON.parse(raw) as LatLngBoundsExpression) : [];
}
getElement(): HTMLVideoElement | undefined {
return this.#obj?.getElement();
}

6
src/core/utils.ts
View File

@ -1,4 +1,5 @@
import type { PropDef } from '../types/props.js';
import type { LatLngBoundsExpression } from 'leaflet';
export function camelCase(str: string): string {
return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
@ -44,6 +45,11 @@ export function numAttr(el: HTMLElement, props: Record<string, PropDef>, name: s
return (props[name] as { default: number }).default;
}
export function parseBoundsAttr(el: HTMLElement): LatLngBoundsExpression {
const raw = el.getAttribute('bounds');
return raw ? (JSON.parse(raw) as LatLngBoundsExpression) : [];
}
export function buildOptions(
el: HTMLElement,
props: Record<string, PropDef>,