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.
main
Buddy 3 months ago
parent e2752aa7e0
commit 96b48a6ae2

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

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

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

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

@ -1,4 +1,5 @@
import type { PropDef } from '../types/props.js'; import type { PropDef } from '../types/props.js';
import type { LatLngBoundsExpression } from 'leaflet';
export function camelCase(str: string): string { export function camelCase(str: string): string {
return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase()); 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; 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( export function buildOptions(
el: HTMLElement, el: HTMLElement,
props: Record<string, PropDef>, props: Record<string, PropDef>,

Loading…
Cancel
Save