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.
92 lines
3.2 KiB
TypeScript
92 lines
3.2 KiB
TypeScript
import { Marker } from 'leaflet';
|
|
import { registerWithParent, buildOptions, parseAttributeValue } from '../core/utils.js';
|
|
import { withProps } from '../core/with-props.js';
|
|
|
|
import {
|
|
createChildRegisterHandler,
|
|
type ChildEntry,
|
|
LeafletRegisterEvent,
|
|
} from '../core/register.js';
|
|
import type { PropDef } 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]),
|
|
);
|
|
|
|
export class LeafletMarker extends withProps(HTMLElement, PROPS) {
|
|
#obj?: Marker;
|
|
#syncing = false;
|
|
#children = new Map<HTMLElement, ChildEntry>();
|
|
#childHandler?: (e: LeafletRegisterEvent) => void;
|
|
|
|
connectedCallback() {
|
|
this.#obj = new Marker(
|
|
[this.#num('lat'), this.#num('lng')],
|
|
buildOptions(this, PROPS, ['lat', 'lng']),
|
|
);
|
|
this.#obj.on('dragend', this.#onDragEnd);
|
|
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
|
|
this.addEventListener('leaflet-register', this.#childHandler);
|
|
registerWithParent(this, this.#obj);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
|
|
this.#obj?.off('dragend', this.#onDragEnd);
|
|
this.#children.clear();
|
|
this.#obj?.remove();
|
|
this.#obj = undefined;
|
|
}
|
|
|
|
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
|
|
if (!this.#obj || this.#syncing) return;
|
|
if (name === 'lat' || name === 'lng') {
|
|
this.#obj.setLatLng([this.#num('lat'), this.#num('lng')]);
|
|
} else if (name === 'draggable') {
|
|
if (val !== null) this.#obj.dragging?.enable();
|
|
else this.#obj.dragging?.disable();
|
|
} else if (name === 'title') {
|
|
const el = this.#obj.getElement();
|
|
if (el) (el as HTMLImageElement).title = val ?? '';
|
|
} else if (name === 'alt') {
|
|
const el = this.#obj.getElement();
|
|
if (el) (el as HTMLImageElement).alt = val ?? '';
|
|
} 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));
|
|
}
|
|
}
|
|
}
|
|
|
|
#onDragEnd = () => {
|
|
if (!this.#obj || this.#syncing) return;
|
|
this.#syncing = true;
|
|
const pos = this.#obj.getLatLng();
|
|
this.setAttribute('lat', String(pos.lat));
|
|
this.setAttribute('lng', String(pos.lng));
|
|
this.#syncing = false;
|
|
};
|
|
|
|
#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);
|