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.
leaflet-components/src/core/path-style.ts

39 lines
1.4 KiB
TypeScript

import { Path } from 'leaflet';
import { parseAttributeValue } from './utils.ts';
// The set of HTML attribute names that map to Leaflet Path style options.
// These are handled especially because Leaflet exposes them through
// setStyle() rather than individual setter methods, and they are shared
// across many vector components (polyline, polygon, circle, rectangle).
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',
]);
// Quick check for whether an attribute name is a path-style attribute.
// Used in attributeChangedCallback to decide whether to route through
// setLayerAttr or updatePathStyle.
export function isPathStyleAttr(name: string): boolean {
return PATH_STYLE_ATTRS.has(name);
}
// Applies a single style change to a Leaflet Path by converting the
// kebab-case attribute name to camelCase and calling setStyle() with
// the parsed value. This is called instead of the generic setLayerAttr
// dispatcher because Path.setStyle is a bulk-update method that merges
// into the existing style object rather than replacing it.
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) });
}