@sakuzu/maplibre-gl-draw 1.0.0 → 2.0.0

package/dist/operations/vertex.js

@@ -17,6 +17,7 @@
  * rings, ring is always treated as 0, and any ring other than 0 is regarded as an
  * invalid reference.
  */
+import { coordinatesOf } from '../shared/utils/coordinates.js';
 import { getVertexPart } from '../shared/utils/vertex-ref.js';
 /**
  * Whether the ring is closed (first = last)
@@ -171,7 +172,7 @@ function movePolygonVertices(rings, initialRings, refs, dx, dy) {
  * @internal
  */
 export function computeVertexMove(state, currentLngLat, feature) {
-    const { vertexIndices, startLngLat, initialCoordinates } = state;
+    const { vertices, startLngLat, initialCoordinates } = state;
     // Compute the amount of movement
     const dx = currentLngLat.lng - startLngLat.lng;
     const dy = currentLngLat.lat - startLngLat.lat;
@@ -184,12 +185,12 @@ export function computeVertexMove(state, currentLngLat, feature) {
     // invalid reference)
     if (feature.type === 'LineString') {
         const coords = initialCoordinates.slice();
-        moveLineVertices(coords, refsOfPart(vertexIndices, 0), dx, dy);
+        moveLineVertices(coords, refsOfPart(vertices, 0), dx, dy);
         return coords;
     }
     if (feature.type === 'Polygon') {
         const initialRings = initialCoordinates;
-        const refs = refsOfPart(vertexIndices, 0);
+        const refs = refsOfPart(vertices, 0);
         const rings = copyRingsForRefs(initialRings, refs);
         movePolygonVertices(rings, initialRings, refs, dx, dy);
         return rings;
@@ -198,7 +199,7 @@ export function computeVertexMove(state, currentLngLat, feature) {
         // Each coordinate is one part. In a reference, part = the part number, and
         // ring / index are 0
         const points = initialCoordinates.slice();
-        for (const ref of vertexIndices) {
+        for (const ref of vertices) {
             if (ref.ring !== 0 || ref.index !== 0)
                 continue;
             const part = getVertexPart(ref);
@@ -213,7 +214,7 @@ export function computeVertexMove(state, currentLngLat, feature) {
         // original array
         const initialParts = initialCoordinates;
         const parts = initialParts.slice();
-        for (const [part, refs] of groupRefsByPart(vertexIndices)) {
+        for (const [part, refs] of groupRefsByPart(vertices)) {
             if (part < 0 || part >= parts.length)
                 continue;
             const coords = initialParts[part].slice();
@@ -225,7 +226,7 @@ export function computeVertexMove(state, currentLngLat, feature) {
     if (feature.type === 'MultiPolygon') {
         const initialParts = initialCoordinates;
         const parts = initialParts.slice();
-        for (const [part, refs] of groupRefsByPart(vertexIndices)) {
+        for (const [part, refs] of groupRefsByPart(vertices)) {
             if (part < 0 || part >= parts.length)
                 continue;
             const initialRings = initialParts[part];
@@ -260,7 +261,7 @@ function copyTopLevelCoordinates(coordinates) {
  * computeVertexMove). The top-level array is always made new, only the container
  * that splice changes (the target ring / part) is copied, and the other parts /
  * rings / coordinate pairs keep sharing references with the input. The input
- * feature.coordinates is never rewritten. For a feature on the order of 100,000
+ * geometry is never rewritten. For a feature on the order of 100,000
  * vertices a full copy took more than ten milliseconds each time, which produced a
  * hitch on a single click that added a vertex.
  *
@@ -272,7 +273,7 @@ function copyTopLevelCoordinates(coordinates) {
 export function addVertex(feature, after, newCoord) {
     const part = getVertexPart(after);
     if (feature.type === 'LineString') {
-        const lineCoords = feature.coordinates.slice();
+        const lineCoords = coordinatesOf(feature).slice();
         // It has neither rings nor parts, so nothing is added other than ring 0 / part 0
         if (after.ring !== 0 || part !== 0)
             return lineCoords;
@@ -280,7 +281,7 @@ export function addVertex(feature, after, newCoord) {
         return lineCoords;
     }
     if (feature.type === 'Polygon') {
-        const initialRings = feature.coordinates;
+        const initialRings = coordinatesOf(feature);
         const rings = initialRings.slice();
         if (part !== 0)
             return rings;
@@ -292,7 +293,7 @@ export function addVertex(feature, after, newCoord) {
         return rings;
     }
     if (feature.type === 'MultiLineString') {
-        const initialParts = feature.coordinates;
+        const initialParts = coordinatesOf(feature);
         const parts = initialParts.slice();
         if (after.ring !== 0)
             return parts;
@@ -304,7 +305,7 @@ export function addVertex(feature, after, newCoord) {
         return parts;
     }
     if (feature.type === 'MultiPolygon') {
-        const initialParts = feature.coordinates;
+        const initialParts = coordinatesOf(feature);
         const parts = initialParts.slice();
         if (part < 0 || part >= parts.length)
             return parts;
@@ -318,7 +319,7 @@ export function addVertex(feature, after, newCoord) {
         parts[part] = rings;
         return parts;
     }
-    return copyTopLevelCoordinates(feature.coordinates);
+    return copyTopLevelCoordinates(coordinatesOf(feature));
 }
 /**
  * Returns an array of rings with one vertex deleted from a ring of the polygon
@@ -376,7 +377,7 @@ function deleteVertexFromRings(initialRings, ref) {
  * computeVertexMove). The top-level array is always made new, only the container
  * that splice changes (the target ring / part) is copied, and the other parts /
  * rings / coordinate pairs keep sharing references with the input. The input
- * feature.coordinates is never rewritten.
+ * geometry is never rewritten.
  *
  * @internal
  */
@@ -391,7 +392,7 @@ export function deleteVertex(feature, ref) {
         // invalid reference
         if (ref.ring !== 0 || part !== 0)
             return null;
-        const initialCoords = feature.coordinates;
+        const initialCoords = coordinatesOf(feature);
         // At least 2 points are needed
         if (initialCoords.length <= 2)
             return null;
@@ -402,12 +403,12 @@ export function deleteVertex(feature, ref) {
     if (feature.type === 'Polygon') {
         if (part !== 0)
             return null;
-        return deleteVertexFromRings(feature.coordinates, ref);
+        return deleteVertexFromRings(coordinatesOf(feature), ref);
     }
     if (feature.type === 'MultiPoint') {
         // Deleting a vertex removes the part itself. The last remaining part cannot be
         // removed
-        const initialPoints = feature.coordinates;
+        const initialPoints = coordinatesOf(feature);
         if (ref.ring !== 0 || ref.index !== 0)
             return null;
         if (part < 0 || part >= initialPoints.length)
@@ -419,7 +420,7 @@ export function deleteVertex(feature, ref) {
         return points;
     }
     if (feature.type === 'MultiLineString') {
-        const initialParts = feature.coordinates;
+        const initialParts = coordinatesOf(feature);
         if (ref.ring !== 0)
             return null;
         if (part < 0 || part >= initialParts.length)
@@ -435,7 +436,7 @@ export function deleteVertex(feature, ref) {
         return parts;
     }
     if (feature.type === 'MultiPolygon') {
-        const initialParts = feature.coordinates;
+        const initialParts = coordinatesOf(feature);
         if (part < 0 || part >= initialParts.length)
             return null;
         const rings = deleteVertexFromRings(initialParts[part], ref);
@@ -445,35 +446,35 @@ export function deleteVertex(feature, ref) {
         parts[part] = rings;
         return parts;
     }
-    return copyTopLevelCoordinates(feature.coordinates);
+    return copyTopLevelCoordinates(coordinatesOf(feature));
 }
 /**
  * Starts the vertex movement operation
  *
  * @internal
  */
-export function startVertexMove(feature, vertexIndices, startLngLat) {
-    if (vertexIndices.length === 0)
+export function startVertexMove(feature, vertices, startLngLat) {
+    if (vertices.length === 0)
         return null;
     // Check the validity of the vertex references
     if (feature.type === 'Point') {
-        if (vertexIndices.length !== 1)
+        if (vertices.length !== 1)
             return null;
-        const ref = vertexIndices[0];
+        const ref = vertices[0];
         if (getVertexPart(ref) !== 0 || ref.ring !== 0 || ref.index !== 0)
             return null;
     }
     else if (feature.type === 'LineString') {
-        const coords = feature.coordinates;
-        const isValid = vertexIndices.every((r) => getVertexPart(r) === 0 && r.ring === 0 && r.index >= 0 && r.index < coords.length);
+        const coords = coordinatesOf(feature);
+        const isValid = vertices.every((r) => getVertexPart(r) === 0 && r.ring === 0 && r.index >= 0 && r.index < coords.length);
         if (!isValid)
             return null;
     }
     else if (feature.type === 'Polygon') {
-        const rings = feature.coordinates;
+        const rings = coordinatesOf(feature);
         if (rings.length === 0)
             return null;
-        const isValid = vertexIndices.every((r) => getVertexPart(r) === 0 &&
+        const isValid = vertices.every((r) => getVertexPart(r) === 0 &&
             r.ring >= 0 &&
             r.ring < rings.length &&
             r.index >= 0 &&
@@ -482,10 +483,10 @@ export function startVertexMove(feature, vertexIndices, startLngLat) {
             return null;
     }
     else if (feature.type === 'MultiPoint') {
-        const points = feature.coordinates;
+        const points = coordinatesOf(feature);
         if (points.length === 0)
             return null;
-        const isValid = vertexIndices.every((r) => {
+        const isValid = vertices.every((r) => {
             const part = getVertexPart(r);
             return part >= 0 && part < points.length && r.ring === 0 && r.index === 0;
         });
@@ -493,10 +494,10 @@ export function startVertexMove(feature, vertexIndices, startLngLat) {
             return null;
     }
     else if (feature.type === 'MultiLineString') {
-        const parts = feature.coordinates;
+        const parts = coordinatesOf(feature);
         if (parts.length === 0)
             return null;
-        const isValid = vertexIndices.every((r) => {
+        const isValid = vertices.every((r) => {
             const part = getVertexPart(r);
             if (part < 0 || part >= parts.length)
                 return false;
@@ -506,10 +507,10 @@ export function startVertexMove(feature, vertexIndices, startLngLat) {
             return null;
     }
     else if (feature.type === 'MultiPolygon') {
-        const parts = feature.coordinates;
+        const parts = coordinatesOf(feature);
         if (parts.length === 0)
             return null;
-        const isValid = vertexIndices.every((r) => {
+        const isValid = vertices.every((r) => {
             const part = getVertexPart(r);
             if (part < 0 || part >= parts.length)
                 return false;
@@ -526,13 +527,13 @@ export function startVertexMove(feature, vertexIndices, startLngLat) {
     }
     return {
         featureId: feature.id,
-        vertexIndices: vertexIndices.map((r) => ({ ...r })),
+        vertices: vertices.map((r) => ({ ...r })),
         startLngLat,
         // Coordinates follow the convention of immutable updates (an update is always a
         // replacement with a new array), and during a drag computeVertexMove also builds a
         // new array every time and swaps it in.
         // So holding a reference from the start is enough: the contents do not change
         // afterwards and no copy is needed
-        initialCoordinates: feature.coordinates,
+        initialCoordinates: coordinatesOf(feature),
     };
 }

package/dist/shared/color.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/shared/color.js

@@ -0,0 +1,245 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/** The named colors of CSS, as `name` and `rrggbb` in turn */
+const NAMED = 'aliceblue f0f8ff antiquewhite faebd7 aqua 00ffff aquamarine 7fffd4 azure f0ffff beige f5f5dc ' +
+    'bisque ffe4c4 black 000000 blanchedalmond ffebcd blue 0000ff blueviolet 8a2be2 brown a52a2a ' +
+    'burlywood deb887 cadetblue 5f9ea0 chartreuse 7fff00 chocolate d2691e coral ff7f50 ' +
+    'cornflowerblue 6495ed cornsilk fff8dc crimson dc143c cyan 00ffff darkblue 00008b ' +
+    'darkcyan 008b8b darkgoldenrod b8860b darkgray a9a9a9 darkgreen 006400 darkgrey a9a9a9 ' +
+    'darkkhaki bdb76b darkmagenta 8b008b darkolivegreen 556b2f darkorange ff8c00 ' +
+    'darkorchid 9932cc darkred 8b0000 darksalmon e9967a darkseagreen 8fbc8f darkslateblue 483d8b ' +
+    'darkslategray 2f4f4f darkslategrey 2f4f4f darkturquoise 00ced1 darkviolet 9400d3 ' +
+    'deeppink ff1493 deepskyblue 00bfff dimgray 696969 dimgrey 696969 dodgerblue 1e90ff ' +
+    'firebrick b22222 floralwhite fffaf0 forestgreen 228b22 fuchsia ff00ff gainsboro dcdcdc ' +
+    'ghostwhite f8f8ff gold ffd700 goldenrod daa520 gray 808080 green 008000 greenyellow adff2f ' +
+    'grey 808080 honeydew f0fff0 hotpink ff69b4 indianred cd5c5c indigo 4b0082 ivory fffff0 ' +
+    'khaki f0e68c lavender e6e6fa lavenderblush fff0f5 lawngreen 7cfc00 lemonchiffon fffacd ' +
+    'lightblue add8e6 lightcoral f08080 lightcyan e0ffff lightgoldenrodyellow fafad2 ' +
+    'lightgray d3d3d3 lightgreen 90ee90 lightgrey d3d3d3 lightpink ffb6c1 lightsalmon ffa07a ' +
+    'lightseagreen 20b2aa lightskyblue 87cefa lightslategray 778899 lightslategrey 778899 ' +
+    'lightsteelblue b0c4de lightyellow ffffe0 lime 00ff00 limegreen 32cd32 linen faf0e6 ' +
+    'magenta ff00ff maroon 800000 mediumaquamarine 66cdaa mediumblue 0000cd mediumorchid ba55d3 ' +
+    'mediumpurple 9370db mediumseagreen 3cb371 mediumslateblue 7b68ee mediumspringgreen 00fa9a ' +
+    'mediumturquoise 48d1cc mediumvioletred c71585 midnightblue 191970 mintcream f5fffa ' +
+    'mistyrose ffe4e1 moccasin ffe4b5 navajowhite ffdead navy 000080 oldlace fdf5e6 ' +
+    'olive 808000 olivedrab 6b8e23 orange ffa500 orangered ff4500 orchid da70d6 ' +
+    'palegoldenrod eee8aa palegreen 98fb98 paleturquoise afeeee palevioletred db7093 ' +
+    'papayawhip ffefd5 peachpuff ffdab9 peru cd853f pink ffc0cb plum dda0dd powderblue b0e0e6 ' +
+    'purple 800080 rebeccapurple 663399 red ff0000 rosybrown bc8f8f royalblue 4169e1 ' +
+    'saddlebrown 8b4513 salmon fa8072 sandybrown f4a460 seagreen 2e8b57 seashell fff5ee ' +
+    'sienna a0522d silver c0c0c0 skyblue 87ceeb slateblue 6a5acd slategray 708090 ' +
+    'slategrey 708090 snow fffafa springgreen 00ff7f steelblue 4682b4 tan d2b48c teal 008080 ' +
+    'thistle d8bfd8 tomato ff6347 turquoise 40e0d0 violet ee82ee wheat f5deb3 white ffffff ' +
+    'whitesmoke f5f5f5 yellow ffff00 yellowgreen 9acd32';
+let namedColors = null;
+/** The table of the named colors, built on the first use */
+function named() {
+    if (namedColors)
+        return namedColors;
+    const words = NAMED.split(' ');
+    namedColors = new Map();
+    for (let i = 0; i < words.length; i += 2)
+        namedColors.set(words[i], words[i + 1]);
+    return namedColors;
+}
+/** The colors parsed so far; the renderers read the same few colors on every frame */
+const cache = new Map();
+const CACHE_LIMIT = 1024;
+/**
+ * Parses a CSS color.
+ *
+ * @param value - The color: `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `rgb()`, `rgba()`,
+ *   `hsl()`, `hsla()`, a named color or `transparent`
+ * @returns The color as `[r, g, b, a]`, each from 0 to 1, or `null` when the value is not a
+ *   color
+ * @internal
+ */
+export function parseColor(value) {
+    if (typeof value !== 'string')
+        return null;
+    let parsed = cache.get(value);
+    if (parsed === undefined) {
+        parsed = parse(value.trim().toLowerCase());
+        if (cache.size >= CACHE_LIMIT)
+            cache.clear();
+        cache.set(value, parsed);
+    }
+    return parsed ? [parsed[0], parsed[1], parsed[2], parsed[3]] : null;
+}
+/**
+ * Whether the value is a CSS color the library can read.
+ *
+ * @internal
+ */
+export function isColor(value) {
+    return typeof value === 'string' && parseColor(value) !== null;
+}
+/**
+ * A CSS color as `[r, g, b, a]` with its alpha multiplied by an opacity; a value that is not
+ * a color gives transparent black.
+ *
+ * @param value - The CSS color
+ * @param opacity - The opacity the alpha of the color is multiplied by, from 0 to 1
+ * @internal
+ */
+export function toColor(value, opacity = 1) {
+    const color = parseColor(value);
+    if (!color)
+        return [0, 0, 0, 0];
+    color[3] *= opacity;
+    return color;
+}
+/**
+ * A color `[r, g, b, a]`, each from 0 to 1, as a CSS color: `#rrggbb`, or `rgba()` when it is
+ * not opaque.
+ *
+ * @internal
+ */
+export function formatColor(color) {
+    const channel = (value) => Math.round(clamp(value, 0, 1) * 255);
+    const [r, g, b] = [channel(color[0]), channel(color[1]), channel(color[2])];
+    const alpha = clamp(color[3], 0, 1);
+    if (alpha === 1) {
+        return `#${[r, g, b].map((c) => c.toString(16).padStart(2, '0')).join('')}`;
+    }
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+/** The colors normalized so far; a style rule gives the same few colors to many features */
+const hexCache = new Map();
+/**
+ * A CSS color as `#rrggbb`, its alpha left out; a value that is not a color is returned as
+ * it is.
+ *
+ * @internal
+ */
+export function toHexColor(value) {
+    let hex = hexCache.get(value);
+    if (hex === undefined) {
+        const color = parseColor(value);
+        hex = color ? formatColor([color[0], color[1], color[2], 1]) : value;
+        if (hexCache.size >= CACHE_LIMIT)
+            hexCache.clear();
+        hexCache.set(value, hex);
+    }
+    return hex;
+}
+function parse(text) {
+    if (text.startsWith('#'))
+        return parseHex(text.slice(1));
+    if (text === 'transparent')
+        return [0, 0, 0, 0];
+    const open = text.indexOf('(');
+    if (open > 0 && text.endsWith(')')) {
+        const name = text.slice(0, open).trim();
+        const args = splitArguments(text.slice(open + 1, -1));
+        if (!args)
+            return null;
+        if (name === 'rgb' || name === 'rgba')
+            return parseRgb(args);
+        if (name === 'hsl' || name === 'hsla')
+            return parseHsl(args);
+        return null;
+    }
+    const hex = named().get(text);
+    return hex ? parseHex(hex) : null;
+}
+/** `rgb`, `rgba`, `rrggbb` or `rrggbbaa` */
+function parseHex(hex) {
+    if (!/^[0-9a-f]+$/.test(hex))
+        return null;
+    const channel = (i, width) => {
+        const digits = hex.slice(i * width, i * width + width);
+        return Number.parseInt(width === 1 ? digits + digits : digits, 16) / 255;
+    };
+    if (hex.length === 3 || hex.length === 4) {
+        return [channel(0, 1), channel(1, 1), channel(2, 1), hex.length === 4 ? channel(3, 1) : 1];
+    }
+    if (hex.length === 6 || hex.length === 8) {
+        return [channel(0, 2), channel(1, 2), channel(2, 2), hex.length === 8 ? channel(3, 2) : 1];
+    }
+    return null;
+}
+/**
+ * The arguments of a color function: three values and an optional alpha, separated by commas
+ * (`1, 2, 3, 0.5`) or by spaces with a slash before the alpha (`1 2 3 / 0.5`)
+ */
+function splitArguments(body) {
+    const text = body.trim();
+    if (text.includes(',')) {
+        const args = text.split(',').map((arg) => arg.trim());
+        return args.length === 3 || args.length === 4 ? args : null;
+    }
+    const [channels, alpha, ...rest] = text.split('/');
+    if (rest.length > 0)
+        return null;
+    const args = channels.trim().split(/\s+/);
+    if (args.length !== 3)
+        return null;
+    if (alpha === undefined)
+        return args;
+    const alphaText = alpha.trim();
+    return alphaText === '' ? null : [...args, alphaText];
+}
+/** A number, or null when the text is not one */
+function toNumber(text) {
+    if (!/^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/.test(text))
+        return null;
+    return Number(text);
+}
+/** A number or a percentage, as a fraction of `scale` for a percentage */
+function numberOrPercent(text, scale) {
+    if (text.endsWith('%')) {
+        const value = toNumber(text.slice(0, -1));
+        return value === null ? null : (value / 100) * scale;
+    }
+    return toNumber(text);
+}
+/** The alpha, from 0 to 1 (a number or a percentage); 1 when it is absent */
+function parseAlpha(text) {
+    if (text === undefined)
+        return 1;
+    const value = numberOrPercent(text, 1);
+    return value === null ? null : clamp(value, 0, 1);
+}
+function parseRgb(args) {
+    const channels = args.slice(0, 3).map((arg) => numberOrPercent(arg, 255));
+    const alpha = parseAlpha(args[3]);
+    if (alpha === null || channels.some((channel) => channel === null))
+        return null;
+    const [r, g, b] = channels;
+    return [clamp(r, 0, 255) / 255, clamp(g, 0, 255) / 255, clamp(b, 0, 255) / 255, alpha];
+}
+function parseHsl(args) {
+    const hue = parseHue(args[0]);
+    const saturation = args[1].endsWith('%') ? toNumber(args[1].slice(0, -1)) : null;
+    const lightness = args[2].endsWith('%') ? toNumber(args[2].slice(0, -1)) : null;
+    const alpha = parseAlpha(args[3]);
+    if (hue === null || saturation === null || lightness === null || alpha === null)
+        return null;
+    const [r, g, b] = hslToRgb(hue, clamp(saturation, 0, 100) / 100, clamp(lightness, 0, 100) / 100);
+    return [r, g, b, alpha];
+}
+/** The hue in degrees, from a number or an angle in `deg`, `rad`, `grad` or `turn` */
+function parseHue(text) {
+    const units = { deg: 1, grad: 0.9, rad: 180 / Math.PI, turn: 360 };
+    for (const [unit, factor] of Object.entries(units)) {
+        if (text.endsWith(unit)) {
+            const value = toNumber(text.slice(0, -unit.length));
+            return value === null ? null : value * factor;
+        }
+    }
+    return toNumber(text);
+}
+/** HSL (hue in degrees, saturation and lightness from 0 to 1) to RGB from 0 to 1 */
+function hslToRgb(hue, saturation, lightness) {
+    const h = (((hue % 360) + 360) % 360) / 30;
+    const a = saturation * Math.min(lightness, 1 - lightness);
+    const channel = (n) => {
+        const k = (n + h) % 12;
+        return lightness - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+    };
+    return [channel(0), channel(8), channel(4)];
+}
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}

package/dist/shared/config/constants.d.ts

@@ -1,23 +1,8 @@
 /**
  * Constant definitions
  *
- * Property prefixes and UI configuration constants.
+ * UI configuration constants.
  */
-/**
- * Keys of the internal meta properties
- *
- * createdZoom/rotation/scale are stored in feature.properties and round-trip through GeoJSON
- * with the maplibre-gl-draw: prefix (this library's own data, required to reproduce the
- * rendering).
- */
-export declare const INTERNAL_PROPERTIES: {
-    /** Zoom level at creation time */
-    readonly CREATED_ZOOM: "createdZoom";
-    /** Rotation angle (degrees) */
-    readonly ROTATION: "rotation";
-    /** Scale */
-    readonly SCALE: "scale";
-};
 /**
  * The handle of the selection UI being dragged
  *
@@ -26,41 +11,3 @@ export declare const INTERNAL_PROPERTIES: {
  * the handles of a line or a polygon, and `radius` and `center` those of a Circle.
  */
 export type HandleType = 'resize-nw' | 'resize-n' | 'resize-ne' | 'resize-e' | 'resize-se' | 'resize-s' | 'resize-sw' | 'resize-w' | 'rotate' | 'vertex' | 'midpoint' | 'radius' | 'center';
-/**
- * Handle positions
- */
-export declare const HANDLE_POSITIONS: {
-    readonly RESIZE: readonly ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
-    readonly ROTATE: "rotate";
-    readonly VERTEX: "vertex";
-    readonly MIDPOINT: "midpoint";
-};
-/**
- * Cursor styles
- */
-export declare const CURSOR_STYLES: {
-    readonly DEFAULT: "default";
-    readonly POINTER: "pointer";
-    readonly MOVE: "move";
-    readonly GRAB: "grab";
-    readonly GRABBING: "grabbing";
-    readonly CROSSHAIR: "crosshair";
-    readonly TEXT: "text";
-    readonly RESIZE_NW: "nw-resize";
-    readonly RESIZE_N: "n-resize";
-    readonly RESIZE_NE: "ne-resize";
-    readonly RESIZE_E: "e-resize";
-    readonly RESIZE_SE: "se-resize";
-    readonly RESIZE_S: "s-resize";
-    readonly RESIZE_SW: "sw-resize";
-    readonly RESIZE_W: "w-resize";
-    readonly ROTATE: "grab";
-};
-/**
- * Mouse event states
- */
-export declare const MOUSE_STATE: {
-    readonly IDLE: "idle";
-    readonly HOVER: "hover";
-    readonly DRAGGING: "dragging";
-};

package/dist/shared/config/constants.js

@@ -1,60 +1,3 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
-/**
- * Constant definitions
- *
- * Property prefixes and UI configuration constants.
- */
-/**
- * Keys of the internal meta properties
- *
- * createdZoom/rotation/scale are stored in feature.properties and round-trip through GeoJSON
- * with the maplibre-gl-draw: prefix (this library's own data, required to reproduce the
- * rendering).
- */
-export const INTERNAL_PROPERTIES = {
-    /** Zoom level at creation time */
-    CREATED_ZOOM: 'createdZoom',
-    /** Rotation angle (degrees) */
-    ROTATION: 'rotation',
-    /** Scale */
-    SCALE: 'scale',
-};
-/**
- * Handle positions
- */
-export const HANDLE_POSITIONS = {
-    RESIZE: ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'],
-    ROTATE: 'rotate',
-    VERTEX: 'vertex',
-    MIDPOINT: 'midpoint',
-};
-/**
- * Cursor styles
- */
-export const CURSOR_STYLES = {
-    DEFAULT: 'default',
-    POINTER: 'pointer',
-    MOVE: 'move',
-    GRAB: 'grab',
-    GRABBING: 'grabbing',
-    CROSSHAIR: 'crosshair',
-    TEXT: 'text',
-    RESIZE_NW: 'nw-resize',
-    RESIZE_N: 'n-resize',
-    RESIZE_NE: 'ne-resize',
-    RESIZE_E: 'e-resize',
-    RESIZE_SE: 'se-resize',
-    RESIZE_S: 's-resize',
-    RESIZE_SW: 'sw-resize',
-    RESIZE_W: 'w-resize',
-    ROTATE: 'grab',
-};
-/**
- * Mouse event states
- */
-export const MOUSE_STATE = {
-    IDLE: 'idle',
-    HOVER: 'hover',
-    DRAGGING: 'dragging',
-};
+export {};

package/dist/shared/config/feature-style.d.ts

@@ -102,22 +102,11 @@ export interface TentativeStyle {
  * The default look of the features, and of the geometry being drawn
  *
  * A key the style of a feature ({@link FeatureStyle}) leaves unset takes its value from here,
- * unless the style rule of the layer gives the color. Give the parts to change through the
- * `style` option of `createMapLibreGLDraw`; the parts left out keep their defaults.
+ * unless the style rule of the layer gives the color. The engine reads it from the `style`
+ * option of `createDraw`, translated to this shape; the parts left out keep their defaults.
  *
  * The selection does not change how a feature is drawn; it is shown by the box and the
  * handles of {@link SelectionUIConfig}.
- *
- * @example
- * ```ts
- * const draw = createMapLibreGLDraw(map, {
- *   style: {
- *     lineString: {
- *       stroke: { width: 3, color: [0, 0.33, 1, 1], opacity: 1, lineStyle: 'solid' },
- *     },
- *   },
- * });
- * ```
  */
 export interface FeatureStyleConfig {
     /**
@@ -138,6 +127,20 @@ export interface FeatureStyleConfig {
      * @defaultValue a `#FF0077` 2 px outline and a `#FF0077` fill at an alpha of 0.25
      */
     polygon: PolygonFeatureStyle;
+    /**
+     * Circle, when it looks different from the polygons
+     *
+     * @defaultValue the look of the polygons
+     */
+    circle?: PolygonFeatureStyle;
+    /**
+     * The opacity of an Image that has none of its own
+     *
+     * @defaultValue 1
+     */
+    image?: {
+        opacity: number;
+    };
     /**
      * The geometry being drawn
      *