You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
import { Polygon } from 'leaflet';
|
|
import { registerWithParent, buildOptions } from '../core/utils.js';
|
|
import { createChildRegisterHandler, type ChildEntry } from '../core/register.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;
|
|
#children = new Map<HTMLElement, ChildEntry>();
|
|
#childHandler?: EventListener;
|
|
|
|
static get observedAttributes() {
|
|
return Object.values(PROPS).map((s) => s.attr);
|
|
}
|
|
|
|
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() {
|
|
this.#obj = new Polygon(this.#getCoords(), buildOptions(this, PROPS));
|
|
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children) as EventListener;
|
|
this.addEventListener('leaflet-register', this.#childHandler);
|
|
registerWithParent(this, this.#obj);
|
|
|
|
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;
|
|
this.removeEventListener('line-updated', this.#syncCoords);
|
|
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 (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);
|