refactor: replace inheritance hierarchy with composable PROPS-table pattern
Remove LeafletElement and LeafletControl base classes. Every component
now self-describes its attributes via a PROPS table, derives observed-
Attributes from it, and generates prototype getters/setters in static {}.
Registration lifecycle is extracted into standalone helpers
(registerWithParent, createChildRegisterHandler). Common update
patterns (path style) are shared via imported helpers instead of
duplicated across 5+ components.
Components manage their own #obj private field instead of a shared
protected leafletObject. Leaflet-map-style declarative patterns are
now consistent across all 20 components.
This commit is contained in:
Buddy
parent
6b448ba092
commit
5f3fd5f61a
@ -1,54 +1,79 @@
|
||||
import { Layer, CircleMarker } from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { CircleMarker } from 'leaflet';
|
||||
import { registerWithParent, buildOptions } from '../core/utils.js';
|
||||
import { isPathStyleAttr, updatePathStyle } from '../core/path-style.js';
|
||||
import type { PropDef, PropTypesFromTable } from '../types/props.js';
|
||||
|
||||
const PROPS = {
|
||||
lat: { kind: 'num', attr: 'lat', default: 0 },
|
||||
lng: { kind: 'num', attr: 'lng', default: 0 },
|
||||
radius: { kind: 'num', attr: 'radius', default: 10 },
|
||||
color: { kind: 'str', attr: 'color', default: '#3388ff' },
|
||||
weight: { kind: 'num', attr: 'weight', default: 3 },
|
||||
opacity: { kind: 'num', attr: 'opacity', default: 1.0 },
|
||||
fill: { kind: 'bool-on', attr: 'fill' },
|
||||
fillColor: { kind: 'str', attr: 'fill-color', default: '#3388ff' },
|
||||
fillOpacity: { kind: 'num', attr: 'fill-opacity', default: 0.2 },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
type PropTypes = PropTypesFromTable<typeof PROPS>;
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletCircleMarker extends TypedBase {
|
||||
#obj?: CircleMarker;
|
||||
|
||||
export class LeafletCircleMarker extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return [
|
||||
'lat',
|
||||
'lng',
|
||||
'radius',
|
||||
'color',
|
||||
'weight',
|
||||
'opacity',
|
||||
'fill',
|
||||
'fill-color',
|
||||
'fill-opacity',
|
||||
];
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
protected createLeafletObject(): Layer {
|
||||
const lat = parseFloat(this.getAttribute('lat') || '0');
|
||||
const lng = parseFloat(this.getAttribute('lng') || '0');
|
||||
return new CircleMarker([lat, lng], this.options);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof CircleMarker) {
|
||||
if (property === 'lat' || property === 'lng') {
|
||||
const lat = parseFloat(this.getAttribute('lat') || '0');
|
||||
const lng = parseFloat(this.getAttribute('lng') || '0');
|
||||
this.leafletObject.setLatLng([lat, lng]);
|
||||
} else if (
|
||||
[
|
||||
'color',
|
||||
'weight',
|
||||
'opacity',
|
||||
'fill',
|
||||
'fillColor',
|
||||
'fillOpacity',
|
||||
'stroke',
|
||||
'dashArray',
|
||||
'dashOffset',
|
||||
'lineCap',
|
||||
'lineJoin',
|
||||
].includes(property)
|
||||
) {
|
||||
this.leafletObject.setStyle({ [property]: value });
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
static {
|
||||
for (const [name, spec] of Object.entries(PROPS)) {
|
||||
Object.defineProperty(LeafletCircleMarker.prototype, name, {
|
||||
get(this: LeafletCircleMarker) {
|
||||
const val = this.getAttribute(spec.attr);
|
||||
if (spec.kind === 'num') return val !== null ? Number(val) : spec.default;
|
||||
if (spec.kind === 'bool-on') return this.hasAttribute(spec.attr);
|
||||
return val ?? spec.default;
|
||||
},
|
||||
set(this: LeafletCircleMarker, v: number | string | boolean) {
|
||||
if (spec.kind === 'bool-on') this.toggleAttribute(spec.attr, !!v);
|
||||
else this.setAttribute(spec.attr, String(v));
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.#obj = new CircleMarker(
|
||||
[this.#num('lat'), this.#num('lng')],
|
||||
buildOptions(this, PROPS, ['lat', 'lng']),
|
||||
);
|
||||
registerWithParent(this, this.#obj);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
|
||||
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')]);
|
||||
} else if (name === 'radius') {
|
||||
this.#obj.setRadius(this.#num('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);
|
||||
|
||||
@ -1,54 +1,79 @@
|
||||
import { Circle, Layer } from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { Circle } from 'leaflet';
|
||||
import { registerWithParent, buildOptions } from '../core/utils.js';
|
||||
import { isPathStyleAttr, updatePathStyle } from '../core/path-style.js';
|
||||
import type { PropDef, PropTypesFromTable } from '../types/props.js';
|
||||
|
||||
const PROPS = {
|
||||
lat: { kind: 'num', attr: 'lat', default: 0 },
|
||||
lng: { kind: 'num', attr: 'lng', default: 0 },
|
||||
radius: { kind: 'num', attr: 'radius', default: 1000 },
|
||||
color: { kind: 'str', attr: 'color', default: '#3388ff' },
|
||||
weight: { kind: 'num', attr: 'weight', default: 3 },
|
||||
opacity: { kind: 'num', attr: 'opacity', default: 1.0 },
|
||||
fill: { kind: 'bool-on', attr: 'fill' },
|
||||
fillColor: { kind: 'str', attr: 'fill-color', default: '#3388ff' },
|
||||
fillOpacity: { kind: 'num', attr: 'fill-opacity', default: 0.2 },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
type PropTypes = PropTypesFromTable<typeof PROPS>;
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletCircle extends TypedBase {
|
||||
#obj?: Circle;
|
||||
|
||||
export class LeafletCircle extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return [
|
||||
'lat',
|
||||
'lng',
|
||||
'radius',
|
||||
'color',
|
||||
'weight',
|
||||
'opacity',
|
||||
'fill',
|
||||
'fill-color',
|
||||
'fill-opacity',
|
||||
];
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
protected createLeafletObject(): Layer {
|
||||
const lat = parseFloat(this.getAttribute('lat') || '0');
|
||||
const lng = parseFloat(this.getAttribute('lng') || '0');
|
||||
return new Circle([lat, lng], this.options);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof Circle) {
|
||||
if (property === 'lat' || property === 'lng') {
|
||||
const lat = parseFloat(this.getAttribute('lat') || '0');
|
||||
const lng = parseFloat(this.getAttribute('lng') || '0');
|
||||
this.leafletObject.setLatLng([lat, lng]);
|
||||
} else if (
|
||||
[
|
||||
'color',
|
||||
'weight',
|
||||
'opacity',
|
||||
'fill',
|
||||
'fillColor',
|
||||
'fillOpacity',
|
||||
'stroke',
|
||||
'dashArray',
|
||||
'dashOffset',
|
||||
'lineCap',
|
||||
'lineJoin',
|
||||
].includes(property)
|
||||
) {
|
||||
this.leafletObject.setStyle({ [property]: value });
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
static {
|
||||
for (const [name, spec] of Object.entries(PROPS)) {
|
||||
Object.defineProperty(LeafletCircle.prototype, name, {
|
||||
get(this: LeafletCircle) {
|
||||
const val = this.getAttribute(spec.attr);
|
||||
if (spec.kind === 'num') return val !== null ? Number(val) : spec.default;
|
||||
if (spec.kind === 'bool-on') return this.hasAttribute(spec.attr);
|
||||
return val ?? spec.default;
|
||||
},
|
||||
set(this: LeafletCircle, v: number | string | boolean) {
|
||||
if (spec.kind === 'bool-on') this.toggleAttribute(spec.attr, !!v);
|
||||
else this.setAttribute(spec.attr, String(v));
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.#obj = new Circle(
|
||||
[this.#num('lat'), this.#num('lng')],
|
||||
buildOptions(this, PROPS, ['lat', 'lng']),
|
||||
);
|
||||
registerWithParent(this, this.#obj);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
|
||||
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')]);
|
||||
} else if (name === 'radius') {
|
||||
this.#obj.setRadius(this.#num('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);
|
||||
|
||||
@ -1,18 +1,48 @@
|
||||
import { Control, ControlPosition } from 'leaflet';
|
||||
import { LeafletControl } from '../core/LeafletControl.js';
|
||||
import { registerWithParent } from '../core/utils.js';
|
||||
import type { PropDef, PropTypesFromTable } from '../types/props.js';
|
||||
|
||||
const PROPS = {
|
||||
position: { kind: 'str', attr: 'position', default: 'bottomright' },
|
||||
prefix: { kind: 'str', attr: 'prefix', default: '' },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
type PropTypes = PropTypesFromTable<typeof PROPS>;
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletControlAttribution extends TypedBase {
|
||||
#obj?: Control.Attribution;
|
||||
|
||||
export class LeafletControlAttribution extends LeafletControl {
|
||||
static get observedAttributes() {
|
||||
return ['position', 'prefix'];
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
protected createControl(): Control {
|
||||
const options: Control.AttributionOptions = {};
|
||||
const position = this.getAttribute('position') as ControlPosition | null;
|
||||
const prefix = this.getAttribute('prefix');
|
||||
if (position) options.position = position;
|
||||
if (prefix !== null) options.prefix = prefix;
|
||||
return new Control.Attribution(options);
|
||||
static {
|
||||
for (const [name, spec] of Object.entries(PROPS)) {
|
||||
Object.defineProperty(LeafletControlAttribution.prototype, name, {
|
||||
get(this: LeafletControlAttribution) {
|
||||
return this.getAttribute(spec.attr) ?? spec.default;
|
||||
},
|
||||
set(this: LeafletControlAttribution, v: string) {
|
||||
this.setAttribute(spec.attr, String(v));
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.#obj = new Control.Attribution({
|
||||
position: this.getAttribute('position') as ControlPosition | undefined,
|
||||
prefix: this.getAttribute('prefix') ?? undefined,
|
||||
});
|
||||
registerWithParent(this, this.#obj);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,24 +1,59 @@
|
||||
import { Control, ControlPosition } from 'leaflet';
|
||||
import { LeafletControl } from '../core/LeafletControl.js';
|
||||
import { registerWithParent } from '../core/utils.js';
|
||||
import type { PropDef, PropTypesFromTable } from '../types/props.js';
|
||||
|
||||
const PROPS = {
|
||||
position: { kind: 'str', attr: 'position', default: 'bottomleft' },
|
||||
maxWidth: { kind: 'num', attr: 'max-width', default: 100 },
|
||||
metric: { kind: 'bool-on', attr: 'metric' },
|
||||
imperial: { kind: 'bool-on', attr: 'imperial' },
|
||||
updateWhenIdle: { kind: 'bool-on', attr: 'update-when-idle' },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
type PropTypes = PropTypesFromTable<typeof PROPS>;
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletControlScale extends TypedBase {
|
||||
#obj?: Control.Scale;
|
||||
|
||||
export class LeafletControlScale extends LeafletControl {
|
||||
static get observedAttributes() {
|
||||
return ['position', 'max-width', 'metric', 'imperial', 'update-when-idle'];
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
protected createControl(): Control {
|
||||
const options: Control.ScaleOptions = {};
|
||||
const position = this.getAttribute('position') as ControlPosition | null;
|
||||
const maxWidth = this.getAttribute('max-width');
|
||||
const metric = this.getAttribute('metric');
|
||||
const imperial = this.getAttribute('imperial');
|
||||
const updateWhenIdle = this.getAttribute('update-when-idle');
|
||||
if (position) options.position = position;
|
||||
if (maxWidth !== null) options.maxWidth = parseInt(maxWidth, 10);
|
||||
if (metric !== null) options.metric = metric !== 'false';
|
||||
if (imperial !== null) options.imperial = imperial !== 'false';
|
||||
if (updateWhenIdle !== null) options.updateWhenIdle = updateWhenIdle !== 'false';
|
||||
return new Control.Scale(options);
|
||||
static {
|
||||
for (const [name, spec] of Object.entries(PROPS)) {
|
||||
Object.defineProperty(LeafletControlScale.prototype, name, {
|
||||
get(this: LeafletControlScale) {
|
||||
const val = this.getAttribute(spec.attr);
|
||||
if (spec.kind === 'num') return val !== null ? Number(val) : spec.default;
|
||||
if (spec.kind === 'bool-on') return this.hasAttribute(spec.attr);
|
||||
return val ?? spec.default;
|
||||
},
|
||||
set(this: LeafletControlScale, v: number | string | boolean) {
|
||||
if (spec.kind === 'bool-on') this.toggleAttribute(spec.attr, !!v);
|
||||
else this.setAttribute(spec.attr, String(v));
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.#obj = new Control.Scale({
|
||||
position: this.getAttribute('position') as ControlPosition | undefined,
|
||||
maxWidth: parseInt(this.getAttribute('max-width') ?? '100', 10),
|
||||
metric: !this.hasAttribute('metric') || this.getAttribute('metric') !== 'false',
|
||||
imperial: !this.hasAttribute('imperial') || this.getAttribute('imperial') !== 'false',
|
||||
updateWhenIdle:
|
||||
!this.hasAttribute('update-when-idle') || this.getAttribute('update-when-idle') !== 'false',
|
||||
});
|
||||
registerWithParent(this, this.#obj);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,24 +1,55 @@
|
||||
import { Control, ControlPosition } from 'leaflet';
|
||||
import { LeafletControl } from '../core/LeafletControl.js';
|
||||
import { registerWithParent } from '../core/utils.js';
|
||||
import type { PropDef, PropTypesFromTable } from '../types/props.js';
|
||||
|
||||
const PROPS = {
|
||||
position: { kind: 'str', attr: 'position', default: 'topleft' },
|
||||
zoomInText: { kind: 'str', attr: 'zoom-in-text', default: '+' },
|
||||
zoomInTitle: { kind: 'str', attr: 'zoom-in-title', default: 'Zoom in' },
|
||||
zoomOutText: { kind: 'str', attr: 'zoom-out-text', default: '-' },
|
||||
zoomOutTitle: { kind: 'str', attr: 'zoom-out-title', default: 'Zoom out' },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
type PropTypes = PropTypesFromTable<typeof PROPS>;
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletControlZoom extends TypedBase {
|
||||
#obj?: Control.Zoom;
|
||||
|
||||
export class LeafletControlZoom extends LeafletControl {
|
||||
static get observedAttributes() {
|
||||
return ['position', 'zoom-in-text', 'zoom-in-title', 'zoom-out-text', 'zoom-out-title'];
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
protected createControl(): Control {
|
||||
const options: Control.ZoomOptions = {};
|
||||
const position = this.getAttribute('position') as ControlPosition | null;
|
||||
const zoomInText = this.getAttribute('zoom-in-text');
|
||||
const zoomInTitle = this.getAttribute('zoom-in-title');
|
||||
const zoomOutText = this.getAttribute('zoom-out-text');
|
||||
const zoomOutTitle = this.getAttribute('zoom-out-title');
|
||||
if (position) options.position = position;
|
||||
if (zoomInText !== null) options.zoomInText = zoomInText;
|
||||
if (zoomInTitle !== null) options.zoomInTitle = zoomInTitle;
|
||||
if (zoomOutText !== null) options.zoomOutText = zoomOutText;
|
||||
if (zoomOutTitle !== null) options.zoomOutTitle = zoomOutTitle;
|
||||
return new Control.Zoom(options);
|
||||
static {
|
||||
for (const [name, spec] of Object.entries(PROPS)) {
|
||||
Object.defineProperty(LeafletControlZoom.prototype, name, {
|
||||
get(this: LeafletControlZoom) {
|
||||
const val = this.getAttribute(spec.attr);
|
||||
return val ?? (spec as { default: string }).default;
|
||||
},
|
||||
set(this: LeafletControlZoom, v: number | string) {
|
||||
this.setAttribute(spec.attr, String(v));
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.#obj = new Control.Zoom({
|
||||
position: this.getAttribute('position') as ControlPosition | undefined,
|
||||
zoomInText: this.getAttribute('zoom-in-text') ?? '+',
|
||||
zoomInTitle: this.getAttribute('zoom-in-title') ?? 'Zoom in',
|
||||
zoomOutText: this.getAttribute('zoom-out-text') ?? '-',
|
||||
zoomOutTitle: this.getAttribute('zoom-out-title') ?? 'Zoom out',
|
||||
});
|
||||
registerWithParent(this, this.#obj);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,9 +1,32 @@
|
||||
import { FeatureGroup, Layer } from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { FeatureGroup } from 'leaflet';
|
||||
import { buildOptions, registerWithParent } from '../core/utils.js';
|
||||
import { createChildRegisterHandler, type ChildEntry } from '../core/register.js';
|
||||
|
||||
export class LeafletFeatureGroup extends LeafletElement {
|
||||
protected createLeafletObject(): Layer {
|
||||
return new FeatureGroup([], this.options);
|
||||
const PROPS = {} as const satisfies Record<string, never>;
|
||||
|
||||
export class LeafletFeatureGroup extends HTMLElement {
|
||||
#obj?: FeatureGroup;
|
||||
#children = new Map<HTMLElement, ChildEntry>();
|
||||
#childHandler?: (e: Event) => void;
|
||||
|
||||
static get observedAttributes() {
|
||||
return [];
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.#obj = new FeatureGroup([], buildOptions(this, PROPS));
|
||||
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children) as EventListener;
|
||||
this.addEventListener('leaflet-register', this.#childHandler);
|
||||
registerWithParent(this, this.#obj);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
if (this.#childHandler) {
|
||||
this.removeEventListener('leaflet-register', this.#childHandler);
|
||||
}
|
||||
this.#children.clear();
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,43 +1,88 @@
|
||||
import { GeoJSON, PathOptions, Layer } from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { GeoJSON, PathOptions } from 'leaflet';
|
||||
import { buildOptions, registerWithParent } from '../core/utils.js';
|
||||
import { createChildRegisterHandler, type ChildEntry } from '../core/register.js';
|
||||
import type { PropDef, PropTypesFromTable } from '../types/props.js';
|
||||
|
||||
const PROPS = {
|
||||
data: { kind: 'str', attr: 'data', default: '' },
|
||||
stroke: { kind: 'str', attr: 'stroke', default: '' },
|
||||
color: { kind: 'str', attr: 'color', default: '#3388ff' },
|
||||
weight: { kind: 'num', attr: 'weight', default: 3 },
|
||||
opacity: { kind: 'num', attr: 'opacity', default: 1.0 },
|
||||
lineCap: { kind: 'str', attr: 'line-cap', default: 'round' },
|
||||
lineJoin: { kind: 'str', attr: 'line-join', default: 'round' },
|
||||
dashArray: { kind: 'str', attr: 'dash-array', default: '' },
|
||||
dashOffset: { kind: 'str', attr: 'dash-offset', default: '' },
|
||||
fill: { kind: 'bool-on', attr: 'fill' },
|
||||
fillColor: { kind: 'str', attr: 'fill-color', default: '#3388ff' },
|
||||
fillOpacity: { kind: 'num', attr: 'fill-opacity', default: 0.2 },
|
||||
fillRule: { kind: 'str', attr: 'fill-rule', default: 'evenodd' },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
const PROP_BY_ATTR = new Map<string, string>(
|
||||
Object.entries(PROPS).map(([name, spec]) => [spec.attr, name]),
|
||||
);
|
||||
|
||||
type PropTypes = PropTypesFromTable<typeof PROPS>;
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletGeoJSON extends TypedBase {
|
||||
#obj?: GeoJSON;
|
||||
#children = new Map<HTMLElement, ChildEntry>();
|
||||
#childHandler?: (e: Event) => void;
|
||||
|
||||
export class LeafletGeoJSON extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return [
|
||||
'data',
|
||||
'stroke',
|
||||
'color',
|
||||
'weight',
|
||||
'opacity',
|
||||
'line-cap',
|
||||
'line-join',
|
||||
'dash-array',
|
||||
'dash-offset',
|
||||
'fill',
|
||||
'fill-color',
|
||||
'fill-opacity',
|
||||
'fill-rule',
|
||||
];
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
protected createLeafletObject(): Layer {
|
||||
static {
|
||||
for (const [name, spec] of Object.entries(PROPS)) {
|
||||
Object.defineProperty(LeafletGeoJSON.prototype, name, {
|
||||
get(this: LeafletGeoJSON) {
|
||||
if (spec.kind === 'num') return Number(this.getAttribute(spec.attr) ?? spec.default);
|
||||
if (spec.kind === 'bool-on') return this.hasAttribute(spec.attr);
|
||||
return this.getAttribute(spec.attr) ?? spec.default;
|
||||
},
|
||||
set(this: LeafletGeoJSON, v: number | string | boolean) {
|
||||
if (spec.kind === 'bool-on') this.toggleAttribute(spec.attr, !!v);
|
||||
else this.setAttribute(spec.attr, String(v));
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const raw = this.getAttribute('data');
|
||||
const data = raw ? JSON.parse(raw) : undefined;
|
||||
const styleOpts = Object.fromEntries(
|
||||
Object.entries(this.options).filter(([k]) => k !== 'data'),
|
||||
Object.entries(buildOptions(this, PROPS, ['data'])).filter(([, v]) => v !== ''),
|
||||
);
|
||||
return new GeoJSON(data, { style: styleOpts as PathOptions });
|
||||
this.#obj = new GeoJSON(data, { style: styleOpts as PathOptions });
|
||||
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children) as EventListener;
|
||||
this.addEventListener('leaflet-register', this.#childHandler);
|
||||
registerWithParent(this, this.#obj);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (!(this.leafletObject instanceof GeoJSON)) return;
|
||||
if (property === 'data') {
|
||||
this.leafletObject.clearLayers();
|
||||
if (value) {
|
||||
this.leafletObject.addData(value as Parameters<GeoJSON['addData']>[0]);
|
||||
}
|
||||
disconnectedCallback() {
|
||||
if (this.#childHandler) {
|
||||
this.removeEventListener('leaflet-register', this.#childHandler);
|
||||
}
|
||||
this.#children.clear();
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
|
||||
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
|
||||
if (!this.#obj) return;
|
||||
if (name === 'data') {
|
||||
this.#obj.clearLayers();
|
||||
if (val) this.#obj.addData(JSON.parse(val));
|
||||
} else {
|
||||
this.leafletObject.setStyle({ [property]: value } as PathOptions);
|
||||
const propName = PROP_BY_ATTR.get(name);
|
||||
if (!propName) return;
|
||||
this.#obj.setStyle({ [propName]: val } as PathOptions);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,44 +1,88 @@
|
||||
import {
|
||||
ImageOverlay,
|
||||
LatLngBounds,
|
||||
LatLngBoundsExpression,
|
||||
LatLngExpression,
|
||||
Layer,
|
||||
} from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { ImageOverlay, LatLngBounds, LatLngBoundsExpression, LatLngExpression } from 'leaflet';
|
||||
import { registerWithParent, buildOptions, parseAttributeValue } from '../core/utils.js';
|
||||
import type { PropDef, PropTypesFromTable } from '../types/props.js';
|
||||
|
||||
const PROPS = {
|
||||
url: { kind: 'str', attr: 'url', default: '' },
|
||||
bounds: { kind: 'str', attr: 'bounds', default: '' },
|
||||
opacity: { kind: 'num', attr: 'opacity', default: 1.0 },
|
||||
alt: { kind: 'str', attr: 'alt', default: '' },
|
||||
interactive: { kind: 'bool-on', attr: 'interactive' },
|
||||
crossOrigin: { kind: 'str', attr: 'cross-origin', default: '' },
|
||||
errorOverlayUrl: { kind: 'str', attr: 'error-overlay-url', default: '' },
|
||||
zIndex: { kind: 'num', attr: 'z-index', default: 0 },
|
||||
className: { kind: 'str', attr: 'class-name', default: '' },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
const PROP_BY_ATTR = new Map<string, string>(
|
||||
Object.entries(PROPS).map(([name, spec]) => [spec.attr, name]),
|
||||
);
|
||||
|
||||
type PropTypes = PropTypesFromTable<typeof PROPS>;
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletImageOverlay extends TypedBase {
|
||||
#obj?: ImageOverlay;
|
||||
|
||||
export class LeafletImageOverlay extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return [
|
||||
'url',
|
||||
'bounds',
|
||||
'opacity',
|
||||
'alt',
|
||||
'interactive',
|
||||
'cross-origin',
|
||||
'error-overlay-url',
|
||||
'z-index',
|
||||
'className',
|
||||
];
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
protected createLeafletObject(): Layer {
|
||||
static {
|
||||
for (const [name, spec] of Object.entries(PROPS)) {
|
||||
Object.defineProperty(LeafletImageOverlay.prototype, name, {
|
||||
get(this: LeafletImageOverlay) {
|
||||
const val = this.getAttribute(spec.attr);
|
||||
if (spec.kind === 'num') return val !== null ? Number(val) : spec.default;
|
||||
if (spec.kind === 'bool-on') return this.hasAttribute(spec.attr);
|
||||
return val ?? spec.default;
|
||||
},
|
||||
set(this: LeafletImageOverlay, v: number | string | boolean) {
|
||||
if (spec.kind === 'bool-on') this.toggleAttribute(spec.attr, !!v);
|
||||
else this.setAttribute(spec.attr, String(v));
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const url = this.getAttribute('url') || '';
|
||||
const bounds = this.options.bounds as LatLngBoundsExpression;
|
||||
return new ImageOverlay(url, bounds, this.options);
|
||||
this.#obj = new ImageOverlay(
|
||||
url,
|
||||
this.#parsedBounds(),
|
||||
buildOptions(this, PROPS, ['url', 'bounds']),
|
||||
);
|
||||
registerWithParent(this, this.#obj);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof ImageOverlay) {
|
||||
if (property === 'url') {
|
||||
this.leafletObject.setUrl(value as string);
|
||||
} else if (property === 'bounds') {
|
||||
this.leafletObject.setBounds(new LatLngBounds(value as LatLngExpression[]));
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
disconnectedCallback() {
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
|
||||
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
|
||||
if (!this.#obj) return;
|
||||
if (name === 'url') {
|
||||
if (val) this.#obj.setUrl(val);
|
||||
} else if (name === 'bounds') {
|
||||
this.#obj.setBounds(new LatLngBounds(this.#parsedBounds() as LatLngExpression[]));
|
||||
} else {
|
||||
const propName = PROP_BY_ATTR.get(name);
|
||||
if (!propName) return;
|
||||
const setter =
|
||||
`set${propName.charAt(0).toUpperCase()}${propName.slice(1)}` as keyof ImageOverlay;
|
||||
if (typeof this.#obj[setter] === 'function') {
|
||||
(this.#obj[setter] as (v: unknown) => void)(parseAttributeValue(val));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#parsedBounds(): LatLngBoundsExpression {
|
||||
const raw = this.getAttribute('bounds');
|
||||
return raw ? (JSON.parse(raw) as LatLngBoundsExpression) : [];
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-image-overlay', LeafletImageOverlay);
|
||||
|
||||
@ -1,9 +1,35 @@
|
||||
import { LayerGroup, Layer } from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { LayerGroup } from 'leaflet';
|
||||
import { buildOptions, registerWithParent } from '../core/utils.js';
|
||||
import { createChildRegisterHandler, type ChildEntry } from '../core/register.js';
|
||||
|
||||
export class LeafletLayerGroup extends LeafletElement {
|
||||
protected createLeafletObject(): Layer {
|
||||
return new LayerGroup([], this.options);
|
||||
const PROPS = {} as const satisfies Record<string, never>;
|
||||
|
||||
export class LeafletLayerGroup extends HTMLElement {
|
||||
#obj?: LayerGroup;
|
||||
#children = new Map<HTMLElement, ChildEntry>();
|
||||
#childHandler?: (e: Event) => void;
|
||||
|
||||
static get observedAttributes() {
|
||||
return [];
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.#obj = new LayerGroup([], buildOptions(this, PROPS));
|
||||
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children) as EventListener;
|
||||
this.addEventListener('leaflet-register', this.#childHandler);
|
||||
registerWithParent(this, this.#obj);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
if (this.#childHandler) {
|
||||
this.removeEventListener('leaflet-register', this.#childHandler);
|
||||
}
|
||||
for (const [el] of this.#children) {
|
||||
this.#obj?.removeLayer(el as unknown as LayerGroup);
|
||||
}
|
||||
this.#children.clear();
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Map as LMap, MapOptions } from 'leaflet';
|
||||
import leafletCSS from 'leaflet/dist/leaflet.css';
|
||||
import { LeafletRegisterEvent } from '../core/LeafletElement.js';
|
||||
import { LeafletRegisterEvent } from '../core/register.js';
|
||||
|
||||
// ── Prop types ─────────────────────────────────────────────────────────────
|
||||
|
||||
|
||||
@ -1,28 +1,83 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { Marker } from 'leaflet';
|
||||
import { registerWithParent, buildOptions, parseAttributeValue } from '../core/utils.js';
|
||||
import type { PropDef, PropTypesFromTable } from '../types/props.js';
|
||||
|
||||
const PROPS = {
|
||||
lat: { kind: 'num', attr: 'lat', default: 0 },
|
||||
lng: { kind: 'num', attr: 'lng', default: 0 },
|
||||
title: { kind: 'str', attr: 'title', default: '' },
|
||||
alt: { kind: 'str', attr: 'alt', default: '' },
|
||||
draggable: { kind: 'bool-on', attr: 'draggable' },
|
||||
opacity: { kind: 'num', attr: 'opacity', default: 1.0 },
|
||||
zIndexOffset: { kind: 'num', attr: 'z-index-offset', default: 0 },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
const PROP_BY_ATTR = new Map<string, string>(
|
||||
Object.entries(PROPS).map(([name, spec]) => [spec.attr, name]),
|
||||
);
|
||||
|
||||
type PropTypes = PropTypesFromTable<typeof PROPS>;
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletMarker extends TypedBase {
|
||||
#obj?: Marker;
|
||||
|
||||
export class LeafletMarker extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return ['lat', 'lng', 'title', 'alt', 'draggable', 'opacity', 'z-index-offset'];
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
const lat = parseFloat(this.getAttribute('lat') || '0');
|
||||
const lng = parseFloat(this.getAttribute('lng') || '0');
|
||||
return new L.Marker([lat, lng], this.options);
|
||||
static {
|
||||
for (const [name, spec] of Object.entries(PROPS)) {
|
||||
Object.defineProperty(LeafletMarker.prototype, name, {
|
||||
get(this: LeafletMarker) {
|
||||
const val = this.getAttribute(spec.attr);
|
||||
if (spec.kind === 'num') return val !== null ? Number(val) : spec.default;
|
||||
if (spec.kind === 'bool-on') return this.hasAttribute(spec.attr);
|
||||
return val ?? spec.default;
|
||||
},
|
||||
set(this: LeafletMarker, v: number | string | boolean) {
|
||||
if (spec.kind === 'bool-on') this.toggleAttribute(spec.attr, !!v);
|
||||
else this.setAttribute(spec.attr, String(v));
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.Marker) {
|
||||
if (property === 'lat' || property === 'lng') {
|
||||
const lat = parseFloat(this.getAttribute('lat') || '0');
|
||||
const lng = parseFloat(this.getAttribute('lng') || '0');
|
||||
this.leafletObject.setLatLng([lat, lng]);
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
connectedCallback() {
|
||||
this.#obj = new Marker(
|
||||
[this.#num('lat'), this.#num('lng')],
|
||||
buildOptions(this, PROPS, ['lat', 'lng']),
|
||||
);
|
||||
registerWithParent(this, this.#obj);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
|
||||
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')]);
|
||||
} else {
|
||||
const propName = PROP_BY_ATTR.get(name);
|
||||
if (!propName) return;
|
||||
const setter = `set${propName.charAt(0).toUpperCase()}${propName.slice(1)}` as keyof Marker;
|
||||
if (typeof this.#obj[setter] === 'function') {
|
||||
(this.#obj[setter] as (v: unknown) => void)(parseAttributeValue(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-marker', LeafletMarker);
|
||||
|
||||
@ -1,68 +1,80 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { LeafletLine } from './leaflet-line.js';
|
||||
import { Polygon } from 'leaflet';
|
||||
import { registerWithParent, buildOptions } from '../core/utils.js';
|
||||
import { isPathStyleAttr, updatePathStyle } from '../core/path-style.js';
|
||||
import type { PropDef, PropTypesFromTable } from '../types/props.js';
|
||||
import type { LeafletLine } from './leaflet-line.js';
|
||||
|
||||
const PROPS = {
|
||||
color: { kind: 'str', attr: 'color', default: '#3388ff' },
|
||||
weight: { kind: 'num', attr: 'weight', default: 3 },
|
||||
opacity: { kind: 'num', attr: 'opacity', default: 1.0 },
|
||||
fill: { kind: 'bool-on', attr: 'fill' },
|
||||
fillColor: { kind: 'str', attr: 'fill-color', default: '#3388ff' },
|
||||
fillOpacity: { kind: 'num', attr: 'fill-opacity', default: 0.2 },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
type PropTypes = PropTypesFromTable<typeof PROPS>;
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletPolygon extends TypedBase {
|
||||
#obj?: Polygon;
|
||||
#observer?: MutationObserver;
|
||||
|
||||
export class LeafletPolygon extends LeafletElement {
|
||||
private _observer?: MutationObserver;
|
||||
static get observedAttributes() {
|
||||
return ['color', 'weight', 'opacity', 'fill', 'fill-color', 'fill-opacity'];
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
const coords = this.getCoords();
|
||||
return new L.Polygon(coords, this.options);
|
||||
}
|
||||
|
||||
private getCoords(): [number, number][] {
|
||||
const lines = Array.from(this.querySelectorAll('leaflet-line')) as LeafletLine[];
|
||||
return lines.map((line) => line.latlng);
|
||||
static {
|
||||
for (const [name, spec] of Object.entries(PROPS)) {
|
||||
Object.defineProperty(LeafletPolygon.prototype, name, {
|
||||
get(this: LeafletPolygon) {
|
||||
const val = this.getAttribute(spec.attr);
|
||||
if (spec.kind === 'num') return val !== null ? Number(val) : spec.default;
|
||||
if (spec.kind === 'bool-on') return this.hasAttribute(spec.attr);
|
||||
return val ?? spec.default;
|
||||
},
|
||||
set(this: LeafletPolygon, v: number | string | boolean) {
|
||||
if (spec.kind === 'bool-on') this.toggleAttribute(spec.attr, !!v);
|
||||
else this.setAttribute(spec.attr, String(v));
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.addEventListener('line-updated', () => {
|
||||
if (this.leafletObject instanceof L.Polygon) {
|
||||
this.leafletObject.setLatLngs(this.getCoords());
|
||||
}
|
||||
});
|
||||
this.#obj = new Polygon(this.#getCoords(), buildOptions(this, PROPS));
|
||||
registerWithParent(this, this.#obj);
|
||||
|
||||
this._observer = new MutationObserver(() => {
|
||||
if (this.leafletObject instanceof L.Polygon) {
|
||||
this.leafletObject.setLatLngs(this.getCoords());
|
||||
}
|
||||
});
|
||||
this._observer.observe(this, { childList: true });
|
||||
this.addEventListener('line-updated', this.#syncCoords);
|
||||
this.#observer = new MutationObserver(() => this.#syncCoords());
|
||||
this.#observer.observe(this, { childList: true });
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this._observer?.disconnect();
|
||||
this._observer = undefined;
|
||||
super.disconnectedCallback();
|
||||
this.#observer?.disconnect();
|
||||
this.#observer = undefined;
|
||||
this.removeEventListener('line-updated', this.#syncCoords);
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.Polygon) {
|
||||
if (
|
||||
[
|
||||
'color',
|
||||
'weight',
|
||||
'opacity',
|
||||
'fill',
|
||||
'fillColor',
|
||||
'fillOpacity',
|
||||
'stroke',
|
||||
'dashArray',
|
||||
'dashOffset',
|
||||
'lineCap',
|
||||
'lineJoin',
|
||||
].includes(property)
|
||||
) {
|
||||
this.leafletObject.setStyle({ [property]: value });
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
|
||||
if (!this.#obj) return;
|
||||
if (isPathStyleAttr(name)) {
|
||||
updatePathStyle(this.#obj, name, val);
|
||||
}
|
||||
}
|
||||
|
||||
#syncCoords = () => {
|
||||
this.#obj?.setLatLngs(this.#getCoords());
|
||||
};
|
||||
|
||||
#getCoords(): [number, number][] {
|
||||
const lines = Array.from(this.querySelectorAll('leaflet-line')) as LeafletLine[];
|
||||
return lines.map((line) => line.latlng);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-polygon', LeafletPolygon);
|
||||
|
||||
@ -1,68 +1,80 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { LeafletLine } from './leaflet-line.js';
|
||||
import { Polyline } from 'leaflet';
|
||||
import { registerWithParent, buildOptions } from '../core/utils.js';
|
||||
import { isPathStyleAttr, updatePathStyle } from '../core/path-style.js';
|
||||
import type { PropDef, PropTypesFromTable } from '../types/props.js';
|
||||
import type { LeafletLine } from './leaflet-line.js';
|
||||
|
||||
const PROPS = {
|
||||
color: { kind: 'str', attr: 'color', default: '#3388ff' },
|
||||
weight: { kind: 'num', attr: 'weight', default: 3 },
|
||||
opacity: { kind: 'num', attr: 'opacity', default: 1.0 },
|
||||
fill: { kind: 'bool-on', attr: 'fill' },
|
||||
fillColor: { kind: 'str', attr: 'fill-color', default: '#3388ff' },
|
||||
fillOpacity: { kind: 'num', attr: 'fill-opacity', default: 0.2 },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
type PropTypes = PropTypesFromTable<typeof PROPS>;
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletPolyline extends TypedBase {
|
||||
#obj?: Polyline;
|
||||
#observer?: MutationObserver;
|
||||
|
||||
export class LeafletPolyline extends LeafletElement {
|
||||
private _observer?: MutationObserver;
|
||||
static get observedAttributes() {
|
||||
return ['color', 'weight', 'opacity', 'fill', 'fill-color', 'fill-opacity'];
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
const coords = this.getCoords();
|
||||
return new L.Polyline(coords, this.options);
|
||||
}
|
||||
|
||||
private getCoords(): [number, number][] {
|
||||
const lines = Array.from(this.querySelectorAll('leaflet-line')) as LeafletLine[];
|
||||
return lines.map((line) => line.latlng);
|
||||
static {
|
||||
for (const [name, spec] of Object.entries(PROPS)) {
|
||||
Object.defineProperty(LeafletPolyline.prototype, name, {
|
||||
get(this: LeafletPolyline) {
|
||||
const val = this.getAttribute(spec.attr);
|
||||
if (spec.kind === 'num') return val !== null ? Number(val) : spec.default;
|
||||
if (spec.kind === 'bool-on') return this.hasAttribute(spec.attr);
|
||||
return val ?? spec.default;
|
||||
},
|
||||
set(this: LeafletPolyline, v: number | string | boolean) {
|
||||
if (spec.kind === 'bool-on') this.toggleAttribute(spec.attr, !!v);
|
||||
else this.setAttribute(spec.attr, String(v));
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.addEventListener('line-updated', () => {
|
||||
if (this.leafletObject instanceof L.Polyline) {
|
||||
this.leafletObject.setLatLngs(this.getCoords());
|
||||
}
|
||||
});
|
||||
this.#obj = new Polyline(this.#getCoords(), buildOptions(this, PROPS));
|
||||
registerWithParent(this, this.#obj);
|
||||
|
||||
this._observer = new MutationObserver(() => {
|
||||
if (this.leafletObject instanceof L.Polyline) {
|
||||
this.leafletObject.setLatLngs(this.getCoords());
|
||||
}
|
||||
});
|
||||
this._observer.observe(this, { childList: true });
|
||||
this.addEventListener('line-updated', this.#syncCoords);
|
||||
this.#observer = new MutationObserver(() => this.#syncCoords());
|
||||
this.#observer.observe(this, { childList: true });
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this._observer?.disconnect();
|
||||
this._observer = undefined;
|
||||
super.disconnectedCallback();
|
||||
this.#observer?.disconnect();
|
||||
this.#observer = undefined;
|
||||
this.removeEventListener('line-updated', this.#syncCoords);
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.Polyline) {
|
||||
if (
|
||||
[
|
||||
'color',
|
||||
'weight',
|
||||
'opacity',
|
||||
'fill',
|
||||
'fillColor',
|
||||
'fillOpacity',
|
||||
'stroke',
|
||||
'dashArray',
|
||||
'dashOffset',
|
||||
'lineCap',
|
||||
'lineJoin',
|
||||
].includes(property)
|
||||
) {
|
||||
this.leafletObject.setStyle({ [property]: value });
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
|
||||
if (!this.#obj) return;
|
||||
if (isPathStyleAttr(name)) {
|
||||
updatePathStyle(this.#obj, name, val);
|
||||
}
|
||||
}
|
||||
|
||||
#syncCoords = () => {
|
||||
this.#obj?.setLatLngs(this.#getCoords());
|
||||
};
|
||||
|
||||
#getCoords(): [number, number][] {
|
||||
const lines = Array.from(this.querySelectorAll('leaflet-line')) as LeafletLine[];
|
||||
return lines.map((line) => line.latlng);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-polyline', LeafletPolyline);
|
||||
|
||||
@ -1,59 +1,85 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { Popup } from 'leaflet';
|
||||
import { registerWithParent, buildOptions } from '../core/utils.js';
|
||||
import type { PropDef, PropTypesFromTable } from '../types/props.js';
|
||||
|
||||
const PROPS = {
|
||||
lat: { kind: 'num', attr: 'lat', default: 0 },
|
||||
lng: { kind: 'num', attr: 'lng', default: 0 },
|
||||
maxWidth: { kind: 'num', attr: 'max-width', default: 300 },
|
||||
minWidth: { kind: 'num', attr: 'min-width', default: 50 },
|
||||
maxHeight: { kind: 'num', attr: 'max-height', default: 0 },
|
||||
autoPan: { kind: 'bool-on', attr: 'auto-pan' },
|
||||
closeButton: { kind: 'bool-on', attr: 'close-button' },
|
||||
autoClose: { kind: 'bool-on', attr: 'auto-close' },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
type PropTypes = PropTypesFromTable<typeof PROPS>;
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletPopup extends TypedBase {
|
||||
#obj?: Popup;
|
||||
#observer?: MutationObserver;
|
||||
|
||||
export class LeafletPopup extends LeafletElement {
|
||||
private _observer?: MutationObserver;
|
||||
static get observedAttributes() {
|
||||
return [
|
||||
'lat',
|
||||
'lng',
|
||||
'max-width',
|
||||
'min-width',
|
||||
'max-height',
|
||||
'auto-pan',
|
||||
'close-button',
|
||||
'auto-close',
|
||||
];
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
const lat = this.getAttribute('lat');
|
||||
const lng = this.getAttribute('lng');
|
||||
const options = { ...this.options, content: this.innerHTML };
|
||||
const popup = new L.Popup(options);
|
||||
if (lat && lng) {
|
||||
popup.setLatLng([parseFloat(lat), parseFloat(lng)]);
|
||||
static {
|
||||
for (const [name, spec] of Object.entries(PROPS)) {
|
||||
Object.defineProperty(LeafletPopup.prototype, name, {
|
||||
get(this: LeafletPopup) {
|
||||
const val = this.getAttribute(spec.attr);
|
||||
if ('default' in spec && spec.kind === 'num')
|
||||
return val !== null ? Number(val) : spec.default;
|
||||
if (spec.kind === 'bool-on') return this.hasAttribute(spec.attr);
|
||||
return val ?? ('default' in spec ? (spec as { default: string }).default : '');
|
||||
},
|
||||
set(this: LeafletPopup, v: number | string | boolean) {
|
||||
if (spec.kind === 'bool-on') this.toggleAttribute(spec.attr, !!v);
|
||||
else this.setAttribute(spec.attr, String(v));
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
return popup;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this._observer = new MutationObserver(() => {
|
||||
if (this.leafletObject instanceof L.Popup) {
|
||||
this.leafletObject.setContent(this.innerHTML);
|
||||
}
|
||||
this.#obj = new Popup({
|
||||
...buildOptions(this, PROPS, ['lat', 'lng']),
|
||||
content: this.innerHTML,
|
||||
});
|
||||
this._observer.observe(this, { childList: true, characterData: true, subtree: true });
|
||||
if (this.hasAttribute('lat') && this.hasAttribute('lng')) {
|
||||
this.#obj.setLatLng([this.#num('lat'), this.#num('lng')]);
|
||||
}
|
||||
registerWithParent(this, this.#obj);
|
||||
|
||||
this.#observer = new MutationObserver(() => {
|
||||
this.#obj?.setContent(this.innerHTML);
|
||||
});
|
||||
this.#observer.observe(this, { childList: true, characterData: true, subtree: true });
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this._observer?.disconnect();
|
||||
this._observer = undefined;
|
||||
super.disconnectedCallback();
|
||||
this.#observer?.disconnect();
|
||||
this.#observer = undefined;
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.Popup) {
|
||||
if (property === 'lat' || property === 'lng') {
|
||||
const lat = parseFloat(this.getAttribute('lat') || '0');
|
||||
const lng = parseFloat(this.getAttribute('lng') || '0');
|
||||
this.leafletObject.setLatLng([lat, lng]);
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
attributeChangedCallback(name: string) {
|
||||
if (!this.#obj) return;
|
||||
if (name === 'lat' || name === 'lng') {
|
||||
this.#obj.setLatLng([this.#num('lat'), this.#num('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);
|
||||
|
||||
@ -1,41 +1,70 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { Rectangle, LatLngBoundsExpression } from 'leaflet';
|
||||
import { registerWithParent, buildOptions } from '../core/utils.js';
|
||||
import { isPathStyleAttr, updatePathStyle } from '../core/path-style.js';
|
||||
import type { PropDef, PropTypesFromTable } from '../types/props.js';
|
||||
|
||||
const PROPS = {
|
||||
bounds: { kind: 'str', attr: 'bounds', default: '' },
|
||||
color: { kind: 'str', attr: 'color', default: '#3388ff' },
|
||||
weight: { kind: 'num', attr: 'weight', default: 3 },
|
||||
opacity: { kind: 'num', attr: 'opacity', default: 1.0 },
|
||||
fill: { kind: 'bool-on', attr: 'fill' },
|
||||
fillColor: { kind: 'str', attr: 'fill-color', default: '#3388ff' },
|
||||
fillOpacity: { kind: 'num', attr: 'fill-opacity', default: 0.2 },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
type PropTypes = PropTypesFromTable<typeof PROPS>;
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletRectangle extends TypedBase {
|
||||
#obj?: Rectangle;
|
||||
|
||||
export class LeafletRectangle extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return ['bounds', 'color', 'weight', 'opacity', 'fill', 'fill-color', 'fill-opacity'];
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
const bounds = this.options.bounds as L.LatLngBoundsExpression;
|
||||
return new L.Rectangle(bounds, this.options);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.Rectangle) {
|
||||
if (property === 'bounds') {
|
||||
this.leafletObject.setBounds(value as L.LatLngBoundsExpression);
|
||||
} else if (
|
||||
[
|
||||
'color',
|
||||
'weight',
|
||||
'opacity',
|
||||
'fill',
|
||||
'fillColor',
|
||||
'fillOpacity',
|
||||
'stroke',
|
||||
'dashArray',
|
||||
'dashOffset',
|
||||
'lineCap',
|
||||
'lineJoin',
|
||||
].includes(property)
|
||||
) {
|
||||
this.leafletObject.setStyle({ [property]: value });
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
static {
|
||||
for (const [name, spec] of Object.entries(PROPS)) {
|
||||
Object.defineProperty(LeafletRectangle.prototype, name, {
|
||||
get(this: LeafletRectangle) {
|
||||
const val = this.getAttribute(spec.attr);
|
||||
if (spec.kind === 'num') return val !== null ? Number(val) : spec.default;
|
||||
if (spec.kind === 'bool-on') return this.hasAttribute(spec.attr);
|
||||
return val ?? spec.default;
|
||||
},
|
||||
set(this: LeafletRectangle, v: number | string | boolean) {
|
||||
if (spec.kind === 'bool-on') this.toggleAttribute(spec.attr, !!v);
|
||||
else this.setAttribute(spec.attr, String(v));
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.#obj = new Rectangle(this.#parsedBounds(), buildOptions(this, PROPS, ['bounds']));
|
||||
registerWithParent(this, this.#obj);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
|
||||
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
|
||||
if (!this.#obj) return;
|
||||
if (name === 'bounds') {
|
||||
this.#obj.setBounds(this.#parsedBounds());
|
||||
} 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);
|
||||
|
||||
@ -1,31 +1,84 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { SVGOverlay, LatLngBounds, LatLngBoundsExpression, LatLngExpression } from 'leaflet';
|
||||
import { registerWithParent, buildOptions, parseAttributeValue } from '../core/utils.js';
|
||||
import type { PropDef, PropTypesFromTable } from '../types/props.js';
|
||||
|
||||
const PROPS = {
|
||||
bounds: { kind: 'str', attr: 'bounds', default: '' },
|
||||
opacity: { kind: 'num', attr: 'opacity', default: 1.0 },
|
||||
interactive: { kind: 'bool-on', attr: 'interactive' },
|
||||
crossOrigin: { kind: 'str', attr: 'cross-origin', default: '' },
|
||||
zIndex: { kind: 'num', attr: 'z-index', default: 0 },
|
||||
className: { kind: 'str', attr: 'class-name', default: '' },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
const PROP_BY_ATTR = new Map<string, string>(
|
||||
Object.entries(PROPS).map(([name, spec]) => [spec.attr, name]),
|
||||
);
|
||||
|
||||
type PropTypes = PropTypesFromTable<typeof PROPS>;
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletSVGOverlay extends TypedBase {
|
||||
#obj?: SVGOverlay;
|
||||
|
||||
export class LeafletSVGOverlay extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return ['bounds', 'opacity', 'alt', 'interactive', 'cross-origin', 'z-index', 'className'];
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
const svg = this.querySelector('svg');
|
||||
const bounds = this.options.bounds as L.LatLngBoundsExpression;
|
||||
if (!svg) {
|
||||
// Create a dummy SVG if none provided
|
||||
const dummy = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
return new L.SVGOverlay(dummy, bounds, this.options);
|
||||
static {
|
||||
for (const [name, spec] of Object.entries(PROPS)) {
|
||||
Object.defineProperty(LeafletSVGOverlay.prototype, name, {
|
||||
get(this: LeafletSVGOverlay) {
|
||||
const val = this.getAttribute(spec.attr);
|
||||
if (spec.kind === 'num') return val !== null ? Number(val) : spec.default;
|
||||
if (spec.kind === 'bool-on') return this.hasAttribute(spec.attr);
|
||||
return val ?? spec.default;
|
||||
},
|
||||
set(this: LeafletSVGOverlay, v: number | string | boolean) {
|
||||
if (spec.kind === 'bool-on') this.toggleAttribute(spec.attr, !!v);
|
||||
else this.setAttribute(spec.attr, String(v));
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
return new L.SVGOverlay(svg, bounds, this.options);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.SVGOverlay) {
|
||||
if (property === 'bounds') {
|
||||
this.leafletObject.setBounds(new L.LatLngBounds(value as L.LatLngExpression[]));
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
connectedCallback() {
|
||||
const svg = this.querySelector('svg');
|
||||
const dummy = !svg ? document.createElementNS('http://www.w3.org/2000/svg', 'svg') : undefined;
|
||||
this.#obj = new SVGOverlay(
|
||||
svg ?? dummy!,
|
||||
this.#parsedBounds(),
|
||||
buildOptions(this, PROPS, ['bounds']),
|
||||
);
|
||||
registerWithParent(this, this.#obj);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
|
||||
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[]));
|
||||
} else {
|
||||
const propName = PROP_BY_ATTR.get(name);
|
||||
if (!propName) return;
|
||||
const setter =
|
||||
`set${propName.charAt(0).toUpperCase()}${propName.slice(1)}` as keyof SVGOverlay;
|
||||
if (typeof this.#obj[setter] === 'function') {
|
||||
(this.#obj[setter] as (v: unknown) => void)(parseAttributeValue(val));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#parsedBounds(): LatLngBoundsExpression {
|
||||
const raw = this.getAttribute('bounds');
|
||||
return raw ? (JSON.parse(raw) as LatLngBoundsExpression) : [];
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-svg-overlay', LeafletSVGOverlay);
|
||||
|
||||
@ -1,22 +1,81 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { TileLayer } from 'leaflet';
|
||||
import { registerWithParent, buildOptions, parseAttributeValue } from '../core/utils.js';
|
||||
import type { PropDef, PropTypesFromTable } from '../types/props.js';
|
||||
|
||||
const PROPS = {
|
||||
url: { kind: 'str', attr: 'url', default: '' },
|
||||
layers: { kind: 'str', attr: 'layers', default: '' },
|
||||
styles: { kind: 'str', attr: 'styles', default: '' },
|
||||
format: { kind: 'str', attr: 'format', default: 'image/jpeg' },
|
||||
transparent: { kind: 'bool-on', attr: 'transparent' },
|
||||
version: { kind: 'str', attr: 'version', default: '1.1.1' },
|
||||
uppercase: { kind: 'bool-on', attr: 'uppercase' },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
const PROP_BY_ATTR = new Map<string, string>(
|
||||
Object.entries(PROPS).map(([name, spec]) => [spec.attr, name]),
|
||||
);
|
||||
|
||||
type PropTypes = PropTypesFromTable<typeof PROPS>;
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletTileLayerWMS extends TypedBase {
|
||||
#obj?: TileLayer.WMS;
|
||||
|
||||
export class LeafletTileLayerWMS extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return ['url', 'layers', 'styles', 'format', 'transparent', 'version', 'crs', 'uppercase'];
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
static {
|
||||
for (const [name, spec] of Object.entries(PROPS)) {
|
||||
Object.defineProperty(LeafletTileLayerWMS.prototype, name, {
|
||||
get(this: LeafletTileLayerWMS) {
|
||||
const val = this.getAttribute(spec.attr);
|
||||
const s = spec as { kind: string; default: unknown };
|
||||
if (s.kind === 'num') return val !== null ? Number(val) : (s.default as number);
|
||||
if (s.kind === 'bool-on') return this.hasAttribute(spec.attr);
|
||||
return val ?? (s.default as string);
|
||||
},
|
||||
set(this: LeafletTileLayerWMS, v: number | string | boolean) {
|
||||
const s = spec as { kind: string };
|
||||
if (s.kind === 'bool-on') this.toggleAttribute(spec.attr, !!v);
|
||||
else this.setAttribute(spec.attr, String(v));
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const url = this.getAttribute('url') || '';
|
||||
return new L.TileLayer.WMS(url, this.options as L.WMSOptions);
|
||||
this.#obj = new TileLayer.WMS(
|
||||
url,
|
||||
buildOptions(this, PROPS, ['url']) as Record<string, string>,
|
||||
);
|
||||
registerWithParent(this, this.#obj);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.TileLayer.WMS) {
|
||||
if (property === 'url') {
|
||||
this.leafletObject.setUrl(value as string);
|
||||
disconnectedCallback() {
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
|
||||
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
|
||||
if (!this.#obj) return;
|
||||
if (name === 'url') {
|
||||
if (val) this.#obj.setUrl(val);
|
||||
} else {
|
||||
const propName = PROP_BY_ATTR.get(name);
|
||||
if (!propName) return;
|
||||
const setter =
|
||||
`set${propName.charAt(0).toUpperCase()}${propName.slice(1)}` as keyof TileLayer.WMS;
|
||||
if (typeof this.#obj[setter] === 'function') {
|
||||
(this.#obj[setter] as (v: unknown) => void)(parseAttributeValue(val));
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
(this.#obj.setParams as unknown as (params: Record<string, unknown>) => void)({
|
||||
[propName]: parseAttributeValue(val),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,22 +1,69 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { TileLayer } from 'leaflet';
|
||||
import { registerWithParent, buildOptions, parseAttributeValue } from '../core/utils.js';
|
||||
import type { PropDef, PropTypesFromTable } from '../types/props.js';
|
||||
|
||||
const PROPS = {
|
||||
url: { kind: 'str', attr: 'url', default: '' },
|
||||
attribution: { kind: 'str', attr: 'attribution', default: '' },
|
||||
minZoom: { kind: 'num', attr: 'min-zoom', default: 0 },
|
||||
maxZoom: { kind: 'num', attr: 'max-zoom', default: 18 },
|
||||
opacity: { kind: 'num', attr: 'opacity', default: 1.0 },
|
||||
zIndex: { kind: 'num', attr: 'z-index', default: 0 },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
const PROP_BY_ATTR = new Map<string, string>(
|
||||
Object.entries(PROPS).map(([name, spec]) => [spec.attr, name]),
|
||||
);
|
||||
|
||||
type PropTypes = PropTypesFromTable<typeof PROPS>;
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletTileLayer extends TypedBase {
|
||||
#obj?: TileLayer;
|
||||
|
||||
export class LeafletTileLayer extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return ['url', 'attribution', 'min-zoom', 'max-zoom', 'opacity', 'z-index'];
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
static {
|
||||
for (const [name, spec] of Object.entries(PROPS)) {
|
||||
Object.defineProperty(LeafletTileLayer.prototype, name, {
|
||||
get(this: LeafletTileLayer) {
|
||||
const val = this.getAttribute(spec.attr);
|
||||
if (spec.kind === 'num') return val !== null ? Number(val) : spec.default;
|
||||
return val ?? spec.default;
|
||||
},
|
||||
set(this: LeafletTileLayer, v: number | string) {
|
||||
this.setAttribute(spec.attr, String(v));
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const url = this.getAttribute('url') || '';
|
||||
return new L.TileLayer(url, this.options);
|
||||
this.#obj = new TileLayer(url, buildOptions(this, PROPS, ['url']));
|
||||
registerWithParent(this, this.#obj);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.TileLayer) {
|
||||
if (property === 'url') {
|
||||
this.leafletObject.setUrl(value as string);
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
disconnectedCallback() {
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
|
||||
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
|
||||
if (!this.#obj) return;
|
||||
if (name === 'url') {
|
||||
if (val) this.#obj.setUrl(val);
|
||||
} else {
|
||||
const propName = PROP_BY_ATTR.get(name);
|
||||
if (!propName) return;
|
||||
const setter =
|
||||
`set${propName.charAt(0).toUpperCase()}${propName.slice(1)}` as keyof TileLayer;
|
||||
if (typeof this.#obj[setter] === 'function') {
|
||||
(this.#obj[setter] as (v: unknown) => void)(parseAttributeValue(val));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,50 +1,84 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { Tooltip } from 'leaflet';
|
||||
import { registerWithParent, buildOptions } from '../core/utils.js';
|
||||
import type { PropDef, PropTypesFromTable } from '../types/props.js';
|
||||
|
||||
const PROPS = {
|
||||
lat: { kind: 'num', attr: 'lat', default: 0 },
|
||||
lng: { kind: 'num', attr: 'lng', default: 0 },
|
||||
pane: { kind: 'str', attr: 'pane', default: '' },
|
||||
offset: { kind: 'str', attr: 'offset', default: '' },
|
||||
direction: { kind: 'str', attr: 'direction', default: 'auto' },
|
||||
permanent: { kind: 'bool-on', attr: 'permanent' },
|
||||
sticky: { kind: 'bool-on', attr: 'sticky' },
|
||||
opacity: { kind: 'num', attr: 'opacity', default: 1.0 },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
type PropTypes = PropTypesFromTable<typeof PROPS>;
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletTooltip extends TypedBase {
|
||||
#obj?: Tooltip;
|
||||
#observer?: MutationObserver;
|
||||
|
||||
export class LeafletTooltip extends LeafletElement {
|
||||
private _observer?: MutationObserver;
|
||||
static get observedAttributes() {
|
||||
return ['lat', 'lng', 'pane', 'offset', 'direction', 'permanent', 'sticky', 'opacity'];
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
const lat = this.getAttribute('lat');
|
||||
const lng = this.getAttribute('lng');
|
||||
const options = { ...this.options, content: this.innerHTML };
|
||||
const tooltip = new L.Tooltip(options);
|
||||
if (lat && lng) {
|
||||
tooltip.setLatLng([parseFloat(lat), parseFloat(lng)]);
|
||||
static {
|
||||
for (const [name, spec] of Object.entries(PROPS)) {
|
||||
Object.defineProperty(LeafletTooltip.prototype, name, {
|
||||
get(this: LeafletTooltip) {
|
||||
const val = this.getAttribute(spec.attr);
|
||||
if (spec.kind === 'num') return val !== null ? Number(val) : spec.default;
|
||||
if (spec.kind === 'bool-on') return this.hasAttribute(spec.attr);
|
||||
return val ?? spec.default;
|
||||
},
|
||||
set(this: LeafletTooltip, v: number | string | boolean) {
|
||||
if (spec.kind === 'bool-on') this.toggleAttribute(spec.attr, !!v);
|
||||
else this.setAttribute(spec.attr, String(v));
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
return tooltip;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this._observer = new MutationObserver(() => {
|
||||
if (this.leafletObject instanceof L.Tooltip) {
|
||||
this.leafletObject.setContent(this.innerHTML);
|
||||
}
|
||||
this.#obj = new Tooltip({
|
||||
...buildOptions(this, PROPS, ['lat', 'lng']),
|
||||
content: this.innerHTML,
|
||||
});
|
||||
this._observer.observe(this, { childList: true, characterData: true, subtree: true });
|
||||
if (this.hasAttribute('lat') && this.hasAttribute('lng')) {
|
||||
this.#obj.setLatLng([this.#num('lat'), this.#num('lng')]);
|
||||
}
|
||||
registerWithParent(this, this.#obj);
|
||||
|
||||
this.#observer = new MutationObserver(() => {
|
||||
this.#obj?.setContent(this.innerHTML);
|
||||
});
|
||||
this.#observer.observe(this, { childList: true, characterData: true, subtree: true });
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this._observer?.disconnect();
|
||||
this._observer = undefined;
|
||||
super.disconnectedCallback();
|
||||
this.#observer?.disconnect();
|
||||
this.#observer = undefined;
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.Tooltip) {
|
||||
if (property === 'lat' || property === 'lng') {
|
||||
const lat = parseFloat(this.getAttribute('lat') || '0');
|
||||
const lng = parseFloat(this.getAttribute('lng') || '0');
|
||||
this.leafletObject.setLatLng([lat, lng]);
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
attributeChangedCallback(name: string) {
|
||||
if (!this.#obj) return;
|
||||
if (name === 'lat' || name === 'lng') {
|
||||
this.#obj.setLatLng([this.#num('lat'), this.#num('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);
|
||||
|
||||
@ -1,44 +1,92 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { VideoOverlay, LatLngBounds, LatLngBoundsExpression, LatLngExpression } from 'leaflet';
|
||||
import { registerWithParent, buildOptions, parseAttributeValue } from '../core/utils.js';
|
||||
import type { PropDef, PropTypesFromTable } from '../types/props.js';
|
||||
|
||||
const PROPS = {
|
||||
url: { kind: 'str', attr: 'url', default: '' },
|
||||
bounds: { kind: 'str', attr: 'bounds', default: '' },
|
||||
opacity: { kind: 'num', attr: 'opacity', default: 1.0 },
|
||||
alt: { kind: 'str', attr: 'alt', default: '' },
|
||||
interactive: { kind: 'bool-on', attr: 'interactive' },
|
||||
crossOrigin: { kind: 'str', attr: 'cross-origin', default: '' },
|
||||
loop: { kind: 'bool-on', attr: 'loop' },
|
||||
autoplay: { kind: 'bool-on', attr: 'autoplay' },
|
||||
muted: { kind: 'bool-on', attr: 'muted' },
|
||||
playsInline: { kind: 'bool-on', attr: 'playsinline' },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
const PROP_BY_ATTR = new Map<string, string>(
|
||||
Object.entries(PROPS).map(([name, spec]) => [spec.attr, name]),
|
||||
);
|
||||
|
||||
type PropTypes = PropTypesFromTable<typeof PROPS>;
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletVideoOverlay extends TypedBase {
|
||||
#obj?: VideoOverlay;
|
||||
|
||||
export class LeafletVideoOverlay extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return [
|
||||
'url',
|
||||
'bounds',
|
||||
'opacity',
|
||||
'alt',
|
||||
'interactive',
|
||||
'cross-origin',
|
||||
'loop',
|
||||
'autoplay',
|
||||
'muted',
|
||||
'playsinline',
|
||||
];
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
static {
|
||||
for (const [name, spec] of Object.entries(PROPS)) {
|
||||
Object.defineProperty(LeafletVideoOverlay.prototype, name, {
|
||||
get(this: LeafletVideoOverlay) {
|
||||
const val = this.getAttribute(spec.attr);
|
||||
if (spec.kind === 'num') return val !== null ? Number(val) : spec.default;
|
||||
if (spec.kind === 'bool-on') return this.hasAttribute(spec.attr);
|
||||
return val ?? spec.default;
|
||||
},
|
||||
set(this: LeafletVideoOverlay, v: number | string | boolean) {
|
||||
if (spec.kind === 'bool-on') this.toggleAttribute(spec.attr, !!v);
|
||||
else this.setAttribute(spec.attr, String(v));
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const url = this.getAttribute('url') || '';
|
||||
const bounds = this.options.bounds as L.LatLngBoundsExpression;
|
||||
return new L.VideoOverlay(url, bounds, this.options);
|
||||
this.#obj = new VideoOverlay(
|
||||
url,
|
||||
this.#parsedBounds(),
|
||||
buildOptions(this, PROPS, ['url', 'bounds']),
|
||||
);
|
||||
registerWithParent(this, this.#obj);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.VideoOverlay) {
|
||||
if (property === 'url') {
|
||||
this.leafletObject.setUrl(value as string);
|
||||
} else if (property === 'bounds') {
|
||||
this.leafletObject.setBounds(new L.LatLngBounds(value as L.LatLngExpression[]));
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
disconnectedCallback() {
|
||||
this.#obj?.remove();
|
||||
this.#obj = undefined;
|
||||
}
|
||||
|
||||
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
|
||||
if (!this.#obj) return;
|
||||
if (name === 'url') {
|
||||
if (val) this.#obj.setUrl(val);
|
||||
} else if (name === 'bounds') {
|
||||
this.#obj.setBounds(new LatLngBounds(this.#parsedBounds() as LatLngExpression[]));
|
||||
} else {
|
||||
const propName = PROP_BY_ATTR.get(name);
|
||||
if (!propName) return;
|
||||
const setter =
|
||||
`set${propName.charAt(0).toUpperCase()}${propName.slice(1)}` as keyof VideoOverlay;
|
||||
if (typeof this.#obj[setter] === 'function') {
|
||||
(this.#obj[setter] as (v: unknown) => void)(parseAttributeValue(val));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#parsedBounds(): LatLngBoundsExpression {
|
||||
const raw = this.getAttribute('bounds');
|
||||
return raw ? (JSON.parse(raw) as LatLngBoundsExpression) : [];
|
||||
}
|
||||
|
||||
getElement(): HTMLVideoElement | undefined {
|
||||
return this.leafletObject instanceof L.VideoOverlay
|
||||
? this.leafletObject.getElement()
|
||||
: undefined;
|
||||
return this.#obj?.getElement();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
import { Control } from 'leaflet';
|
||||
|
||||
export abstract class LeafletControl extends HTMLElement {
|
||||
protected control?: Control;
|
||||
|
||||
static get observedAttributes(): string[] {
|
||||
return [];
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.control = this.createControl();
|
||||
this.register();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.control?.remove();
|
||||
this.control = undefined;
|
||||
}
|
||||
|
||||
protected abstract createControl(): Control;
|
||||
|
||||
protected register() {
|
||||
if (this.control) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('leaflet-register', {
|
||||
detail: {
|
||||
leafletObject: this.control,
|
||||
element: this,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,141 +0,0 @@
|
||||
import { Layer, Control, Popup, Tooltip, LayerGroup } from 'leaflet';
|
||||
|
||||
export interface LeafletRegisterEvent extends CustomEvent {
|
||||
detail: {
|
||||
leafletObject: Layer | Control;
|
||||
element: HTMLElement;
|
||||
};
|
||||
}
|
||||
|
||||
export abstract class LeafletElement extends HTMLElement {
|
||||
protected leafletObject?: Layer;
|
||||
protected options: Record<string, unknown> = {};
|
||||
protected _parentLayer?: Layer;
|
||||
protected _parentBindingType?: 'popup' | 'tooltip' | 'layer';
|
||||
private _registerHandler?: EventListener;
|
||||
|
||||
static get observedAttributes(): string[] {
|
||||
return [];
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.initOptions();
|
||||
this.leafletObject = this.createLeafletObject();
|
||||
|
||||
this._registerHandler = ((e: LeafletRegisterEvent) => {
|
||||
if (this.leafletObject) {
|
||||
const childObj = e.detail.leafletObject;
|
||||
const childEl = e.detail.element;
|
||||
if (childObj instanceof Popup) {
|
||||
e.stopPropagation();
|
||||
this.leafletObject.bindPopup(childObj);
|
||||
if (childEl instanceof LeafletElement) {
|
||||
childEl._parentLayer = this.leafletObject;
|
||||
childEl._parentBindingType = 'popup';
|
||||
}
|
||||
} else if (childObj instanceof Tooltip) {
|
||||
e.stopPropagation();
|
||||
this.leafletObject.bindTooltip(childObj);
|
||||
if (childEl instanceof LeafletElement) {
|
||||
childEl._parentLayer = this.leafletObject;
|
||||
childEl._parentBindingType = 'tooltip';
|
||||
}
|
||||
} else if (childObj instanceof Layer && 'addLayer' in this.leafletObject) {
|
||||
e.stopPropagation();
|
||||
(this.leafletObject as LayerGroup).addLayer(childObj);
|
||||
if (childEl instanceof LeafletElement) {
|
||||
childEl._parentLayer = this.leafletObject;
|
||||
childEl._parentBindingType = 'layer';
|
||||
}
|
||||
}
|
||||
}
|
||||
}) as EventListener;
|
||||
this.addEventListener('leaflet-register', this._registerHandler);
|
||||
|
||||
this.register();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
if (this._registerHandler) {
|
||||
this.removeEventListener('leaflet-register', this._registerHandler);
|
||||
this._registerHandler = undefined;
|
||||
}
|
||||
if (!this.leafletObject) return;
|
||||
if (this._parentBindingType === 'popup' && this._parentLayer) {
|
||||
this._parentLayer.unbindPopup();
|
||||
} else if (this._parentBindingType === 'tooltip' && this._parentLayer) {
|
||||
this._parentLayer.unbindTooltip();
|
||||
} else if (
|
||||
this._parentBindingType === 'layer' &&
|
||||
this._parentLayer &&
|
||||
'removeLayer' in this._parentLayer
|
||||
) {
|
||||
(this._parentLayer as LayerGroup).removeLayer(this.leafletObject);
|
||||
} else {
|
||||
this.leafletObject.remove();
|
||||
}
|
||||
this._parentLayer = undefined;
|
||||
this._parentBindingType = undefined;
|
||||
this.leafletObject = undefined;
|
||||
}
|
||||
|
||||
protected initOptions() {
|
||||
const observed = (this.constructor as typeof LeafletElement).observedAttributes;
|
||||
observed.forEach((attr) => {
|
||||
const val = this.getAttribute(attr);
|
||||
if (val !== null) {
|
||||
this.options[camelCase(attr)] = parseAttributeValue(val);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
attributeChangedCallback(name: string, oldValue: string, newValue: string) {
|
||||
if (oldValue === newValue) return;
|
||||
const propertyName = camelCase(name);
|
||||
const parsedValue = parseAttributeValue(newValue);
|
||||
this.options[propertyName] = parsedValue;
|
||||
|
||||
if (this.leafletObject) {
|
||||
this.updateLeafletObject(propertyName, parsedValue);
|
||||
}
|
||||
}
|
||||
|
||||
protected abstract createLeafletObject(): Layer;
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
const setter = `set${property.charAt(0).toUpperCase()}${property.slice(1)}`;
|
||||
const obj = this.leafletObject as unknown as Record<string, unknown>;
|
||||
if (obj && typeof obj[setter] === 'function') {
|
||||
(obj[setter] as (val: unknown) => void)(value);
|
||||
}
|
||||
}
|
||||
|
||||
protected register() {
|
||||
if (!this.leafletObject) return;
|
||||
const event = new CustomEvent('leaflet-register', {
|
||||
detail: {
|
||||
leafletObject: this.leafletObject,
|
||||
element: this,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
});
|
||||
this.dispatchEvent(event);
|
||||
}
|
||||
}
|
||||
|
||||
function camelCase(str: string): string {
|
||||
return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
||||
}
|
||||
|
||||
function parseAttributeValue(value: string): unknown {
|
||||
if (value === 'true') return true;
|
||||
if (value === 'false') return false;
|
||||
const num = Number(value);
|
||||
if (!isNaN(num) && value !== '') return num;
|
||||
try {
|
||||
return JSON.parse(value);
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
26
src/core/path-style.ts
Normal file
26
src/core/path-style.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { Path } from 'leaflet';
|
||||
import { parseAttributeValue } from './utils.js';
|
||||
|
||||
export const PATH_STYLE_ATTRS = new Set([
|
||||
'color',
|
||||
'weight',
|
||||
'opacity',
|
||||
'fill',
|
||||
'fill-color',
|
||||
'fill-opacity',
|
||||
'stroke',
|
||||
'dash-array',
|
||||
'dash-offset',
|
||||
'line-cap',
|
||||
'line-join',
|
||||
'fill-rule',
|
||||
]);
|
||||
|
||||
export function isPathStyleAttr(name: string): boolean {
|
||||
return PATH_STYLE_ATTRS.has(name);
|
||||
}
|
||||
|
||||
export function updatePathStyle(obj: Path, name: string, value: string | null) {
|
||||
const key = name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
||||
obj.setStyle({ [key]: parseAttributeValue(value) });
|
||||
}
|
||||
35
src/core/register.ts
Normal file
35
src/core/register.ts
Normal file
@ -0,0 +1,35 @@
|
||||
import { Layer, LayerGroup, Popup, Tooltip } from 'leaflet';
|
||||
|
||||
export interface LeafletRegisterEvent extends CustomEvent {
|
||||
detail: {
|
||||
leafletObject: Layer;
|
||||
element: HTMLElement;
|
||||
};
|
||||
}
|
||||
|
||||
export type ChildEntry = {
|
||||
type: 'layer' | 'popup' | 'tooltip';
|
||||
};
|
||||
|
||||
export function createChildRegisterHandler(
|
||||
container: LayerGroup,
|
||||
children: globalThis.Map<HTMLElement, ChildEntry>,
|
||||
) {
|
||||
return (e: LeafletRegisterEvent) => {
|
||||
const obj = e.detail.leafletObject;
|
||||
const el = e.detail.element;
|
||||
if (obj instanceof Popup) {
|
||||
e.stopPropagation();
|
||||
container.bindPopup(obj);
|
||||
children.set(el, { type: 'popup' });
|
||||
} else if (obj instanceof Tooltip) {
|
||||
e.stopPropagation();
|
||||
container.bindTooltip(obj);
|
||||
children.set(el, { type: 'tooltip' });
|
||||
} else if (obj instanceof Layer && 'addLayer' in container) {
|
||||
e.stopPropagation();
|
||||
container.addLayer(obj);
|
||||
children.set(el, { type: 'layer' });
|
||||
}
|
||||
};
|
||||
}
|
||||
57
src/core/utils.ts
Normal file
57
src/core/utils.ts
Normal file
@ -0,0 +1,57 @@
|
||||
import type { PropDef } from '../types/props.js';
|
||||
|
||||
export function camelCase(str: string): string {
|
||||
return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
||||
}
|
||||
|
||||
export function parseAttributeValue(value: string | null): unknown {
|
||||
if (value === null) return null;
|
||||
if (value === 'true') return true;
|
||||
if (value === 'false') return false;
|
||||
const num = Number(value);
|
||||
if (!isNaN(num) && value !== '') return num;
|
||||
try {
|
||||
return JSON.parse(value);
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
export function buildOptions(
|
||||
el: HTMLElement,
|
||||
props: Record<string, PropDef>,
|
||||
exclude: string[] = [],
|
||||
): Record<string, unknown> {
|
||||
const opts: Record<string, unknown> = {};
|
||||
for (const [propName, spec] of Object.entries(props)) {
|
||||
if (exclude.includes(propName)) continue;
|
||||
const val = el.getAttribute(spec.attr);
|
||||
if (val === null) {
|
||||
if ('default' in spec) opts[propName] = spec.default;
|
||||
continue;
|
||||
}
|
||||
if (spec.kind === 'num') opts[propName] = Number(val);
|
||||
else if (spec.kind === 'bool-on') opts[propName] = true;
|
||||
else if (spec.kind === 'bool-off') opts[propName] = false;
|
||||
else opts[propName] = val;
|
||||
}
|
||||
return opts;
|
||||
}
|
||||
|
||||
export function registerWithParent(el: HTMLElement, obj: unknown) {
|
||||
el.dispatchEvent(
|
||||
new CustomEvent('leaflet-register', {
|
||||
detail: { leafletObject: obj, element: el },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
export function updateViaSetter(obj: Record<string, unknown>, name: string, value: unknown) {
|
||||
const prop = camelCase(name);
|
||||
const setter = `set${prop.charAt(0).toUpperCase()}${prop.slice(1)}`;
|
||||
if (typeof obj[setter] === 'function') {
|
||||
(obj[setter] as (v: unknown) => void)(value ?? parseAttributeValue(name));
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,7 @@
|
||||
export * from './core/LeafletElement.js';
|
||||
export * from './core/LeafletControl.js';
|
||||
export * from './core/utils.js';
|
||||
export * from './core/path-style.js';
|
||||
export * from './core/register.js';
|
||||
export * from './types/props.js';
|
||||
export * from './components/leaflet-map.js';
|
||||
export * from './components/leaflet-marker.js';
|
||||
export * from './components/leaflet-circle.js';
|
||||
|
||||
43
src/types/props.ts
Normal file
43
src/types/props.ts
Normal file
@ -0,0 +1,43 @@
|
||||
export type NumProp = {
|
||||
kind: 'num';
|
||||
attr: string;
|
||||
default: number;
|
||||
};
|
||||
|
||||
export type StrProp = {
|
||||
kind: 'str';
|
||||
attr: string;
|
||||
default: string;
|
||||
};
|
||||
|
||||
export type BoolOnProp = {
|
||||
kind: 'bool-on';
|
||||
attr: string;
|
||||
};
|
||||
|
||||
export type BoolOffProp = {
|
||||
kind: 'bool-off';
|
||||
attr: string;
|
||||
};
|
||||
|
||||
export type PropDef = NumProp | StrProp | BoolOnProp | BoolOffProp;
|
||||
|
||||
export type PropTypeOf<T extends PropDef> = T extends NumProp
|
||||
? number
|
||||
: T extends StrProp
|
||||
? string
|
||||
: boolean;
|
||||
|
||||
export type PropTypesFromTable<T extends Record<string, PropDef>> = {
|
||||
[K in keyof T]: PropTypeOf<T[K]>;
|
||||
};
|
||||
|
||||
export function attrToPropName<P extends Record<string, PropDef>>(
|
||||
props: P,
|
||||
attr: string,
|
||||
): keyof P | undefined {
|
||||
for (const [name, spec] of Object.entries(props) as [keyof P, PropDef][]) {
|
||||
if (spec.attr === attr) return name;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user