From 96b48a6ae20bbab63c7ab1425b95db8aa2b9434f Mon Sep 17 00:00:00 2001 From: Buddy Date: Mon, 8 Jun 2026 22:51:36 -0700 Subject: [PATCH] refactor: extract #parsedBounds into parseBoundsAttr helper 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. --- src/components/leaflet-image-overlay.ts | 13 ++++--------- src/components/leaflet-rectangle.ts | 13 ++++--------- src/components/leaflet-svg-overlay.ts | 13 ++++--------- src/components/leaflet-video-overlay.ts | 13 ++++--------- src/core/utils.ts | 6 ++++++ 5 files changed, 22 insertions(+), 36 deletions(-) diff --git a/src/components/leaflet-image-overlay.ts b/src/components/leaflet-image-overlay.ts index 7362799..5107a2f 100644 --- a/src/components/leaflet-image-overlay.ts +++ b/src/components/leaflet-image-overlay.ts @@ -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); diff --git a/src/components/leaflet-rectangle.ts b/src/components/leaflet-rectangle.ts index f0b049c..04d70a1 100644 --- a/src/components/leaflet-rectangle.ts +++ b/src/components/leaflet-rectangle.ts @@ -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); diff --git a/src/components/leaflet-svg-overlay.ts b/src/components/leaflet-svg-overlay.ts index 0877eaf..e72ec82 100644 --- a/src/components/leaflet-svg-overlay.ts +++ b/src/components/leaflet-svg-overlay.ts @@ -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); diff --git a/src/components/leaflet-video-overlay.ts b/src/components/leaflet-video-overlay.ts index 4e6210c..6c246a1 100644 --- a/src/components/leaflet-video-overlay.ts +++ b/src/components/leaflet-video-overlay.ts @@ -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(); } diff --git a/src/core/utils.ts b/src/core/utils.ts index e432df5..6f48d5a 100644 --- a/src/core/utils.ts +++ b/src/core/utils.ts @@ -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, 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,