@sakuzu/maplibre-gl-draw 1.0.0

package/dist/api/selection-api.js

@@ -0,0 +1,78 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * Selection API
+ *
+ * Provides the Selection and Vertex Selection operations of MapLibreGLDraw.
+ */
+import { deleteSelection } from '../operations/selection-operations.js';
+import { deleteVertex as deleteVertexOp, sortVertexRefsForDeletion } from '../operations/vertex.js';
+export function createSelectionApi(deps) {
+    const { store } = deps;
+    return {
+        getSelection() {
+            return store.getSelection();
+        },
+        select(ids, type = 'feature') {
+            const idsArray = Array.isArray(ids) ? ids : [ids];
+            store.setSelection(type, idsArray);
+        },
+        deselect() {
+            store.setSelection(null, []);
+        },
+        getSelectedFeatures() {
+            const selection = store.getSelection();
+            if (selection.type !== 'feature')
+                return [];
+            return selection.ids
+                .map((id) => store.getFeature(id))
+                .filter((f) => f !== undefined);
+        },
+        getSelectedIds() {
+            return [...store.getSelection().ids];
+        },
+        deleteSelection() {
+            return deleteSelection(store);
+        },
+        selectVertices(featureId, vertices) {
+            store.setSelectedVertices({ featureId, vertexIndices: vertices });
+        },
+        deselectVertices() {
+            store.setSelectedVertices(null);
+        },
+        getSelectedVertices() {
+            return store.getSelectedVertices();
+        },
+        deleteVertices(featureId, vertices) {
+            if (vertices.length === 0)
+                return 0;
+            const feature = store.getFeature(featureId);
+            if (!feature)
+                return 0;
+            // Within the same part and the same ring, delete in descending index order
+            // (avoids the shift caused by earlier deletions; for MultiPoint the part itself
+            // disappears, so parts are in descending order too)
+            const sortedRefs = sortVertexRefsForDeletion(vertices);
+            let coords = JSON.parse(JSON.stringify(feature.coordinates));
+            let deletedCount = 0;
+            for (const ref of sortedRefs) {
+                const result = deleteVertexOp({ ...feature, coordinates: coords }, ref);
+                if (result !== null) {
+                    coords = result;
+                    deletedCount++;
+                }
+            }
+            if (deletedCount > 0) {
+                store.transact(() => {
+                    store.updateFeature(featureId, { coordinates: coords });
+                    // If the deleted vertices were selected, clear the selection
+                    const selectedVertices = store.getSelectedVertices();
+                    if (selectedVertices?.featureId === featureId) {
+                        store.setSelectedVertices(null);
+                    }
+                });
+            }
+            return deletedCount;
+        },
+    };
+}

package/dist/api/snapping-api.d.ts

@@ -0,0 +1,125 @@
+import type { ScreenPoint } from '../shared/math/index.js';
+import type { ResolvedSnapOptions, SnapContext, SnapLngLat, SnapProvider, SnapResult, SnapTargetKind } from '../snapping/types.js';
+/**
+ * The snapping of a draw instance, reached as `draw.snapping`: switching it at runtime,
+ * reading its settings and adding candidates.
+ *
+ * Snapping replaces the coordinate of a click, a move or a drag with the nearest candidate
+ * within the tolerance, before any mode sees it, so it works the same way in every mode and
+ * for vertex dragging. The initial settings come from {@link Options.snap}. Holding the
+ * modifier of `disableKey` (Alt by default) releases it while held. Every change of the
+ * result is announced by the `draw.snap.change` event.
+ *
+ * @example
+ * ```typescript
+ * draw.snapping.setEnabled(false);
+ * draw.snapping.setKindEnabled('guide', false); // turn off guides only
+ * const unregister = draw.snapping.register(myProvider);
+ * unregister();
+ * ```
+ */
+export interface SnappingOperations {
+    /**
+     * Registers a provider of snapping candidates.
+     *
+     * The candidates are mixed in on top of the built-in providers (the vertices and edges of
+     * the Store) and compete with them by distance and priority. On a destroyed instance the
+     * registration is ignored.
+     *
+     * @param provider the provider to register
+     * @returns a function that unregisters it
+     */
+    register(provider: SnapProvider): () => void;
+    /**
+     * Enables or disables snapping.
+     *
+     * The initial value is `options.snap.enabled` (default true). A change takes effect from the
+     * next input.
+     *
+     * @param enabled true to snap, false to pass every coordinate through as it is
+     */
+    setEnabled(enabled: boolean): void;
+    /** Whether snapping is enabled */
+    isEnabled(): boolean;
+    /**
+     * Enables or disables snapping per kind (vertex / edge / intersection / guide).
+     *
+     * The initial value is `options.snap.kinds` (all true by default). The candidates of a
+     * disabled kind are excluded from the evaluation, even when a provider returns them.
+     *
+     * @param kind the kind of target
+     * @param enabled whether that kind is snapped to
+     */
+    setKindEnabled(kind: SnapTargetKind, enabled: boolean): void;
+    /**
+     * Whether the kind is enabled
+     *
+     * @param kind the kind of target
+     */
+    isKindEnabled(kind: SnapTargetKind): boolean;
+    /**
+     * Switches whether datasets (data that is only displayed) are included as
+     * snapping targets.
+     *
+     * The initial value is `options.snap.datasets` (default true). Setting it to false stops
+     * only the snapping to that data; snapping to the features of the Store remains.
+     *
+     * @param enabled whether datasets are snapping targets
+     */
+    setDatasetsEnabled(enabled: boolean): void;
+    /** Whether datasets are snapping targets */
+    isDatasetsEnabled(): boolean;
+    /**
+     * Sets the step angle of the built-in north-based guides.
+     *
+     * The initial value is `options.snap.guideStepDegrees` (default 45, which gives 8 guides).
+     * The change takes effect from the next snapping query. A value of 0 or less, or a
+     * non-finite value, gives the default 45. The current value is in
+     * `getOptions().guideStepDegrees`. Guides added with `createGuideSnapProvider` keep their
+     * own step.
+     *
+     * @param degrees the step angle in degrees, counted from true north
+     *
+     * @example
+     * ```typescript
+     * draw.snapping.setGuideStep(15); // 24 guides, every 15 degrees
+     * ```
+     */
+    setGuideStep(degrees: number): void;
+    /**
+     * Gets the snapping options with the defaults filled in.
+     *
+     * enabled, kinds, display and guideStepDegrees are the current values, reflecting the changes made at runtime.
+     * `kinds` is a copy with every kind filled in, so changing it has no effect. A settings UI
+     * reads its current values here.
+     */
+    getOptions(): ResolvedSnapOptions;
+    /**
+     * Gets the most recent snapping result.
+     *
+     * null if nothing has been resolved yet. When nothing is snapped, it returns a SnapResult
+     * with no target.
+     */
+    getResult(): SnapResult | null;
+    /**
+     * Resolves snapping for a coordinate.
+     *
+     * There is no need to call it for normal input, because the InputRouter passes it through
+     * automatically. It is the entry point for when a coordinate produced outside the library,
+     * such as numeric input or synthetic input, should be passed through snapping.
+     *
+     * @param lngLat the input coordinate
+     * @param point the screen coordinate (when omitted, it is computed with map.project)
+     * @param ctx overrides for the context (when omitted, zoom is the current zoom and
+     *   modifiers are all false)
+     * @returns the snapped coordinate and what it snapped to; the input coordinate with no
+     *   target when nothing is within the tolerance
+     *
+     * @example
+     * ```typescript
+     * const { lngLat, target } = draw.snapping.resolve({ lng: 139.7, lat: 35.68 });
+     * if (target) console.log('snapped to a', target.kind);
+     * ```
+     */
+    resolve(lngLat: SnapLngLat, point?: ScreenPoint, ctx?: Partial<SnapContext>): SnapResult;
+}

package/dist/api/snapping-api.js

@@ -0,0 +1,50 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/** The state in which no modifier key is pressed */
+const NO_MODIFIERS = { shift: false, ctrl: false, alt: false, meta: false };
+/** @internal */
+export function createSnappingApi(deps) {
+    const { snapService, map } = deps;
+    return {
+        snapping: {
+            register(provider) {
+                return snapService.register(provider);
+            },
+            setEnabled(enabled) {
+                snapService.setEnabled(enabled);
+            },
+            isEnabled() {
+                return snapService.isEnabled();
+            },
+            setKindEnabled(kind, enabled) {
+                snapService.setKindEnabled(kind, enabled);
+            },
+            isKindEnabled(kind) {
+                return snapService.isKindEnabled(kind);
+            },
+            setDatasetsEnabled(enabled) {
+                snapService.setDatasetsEnabled(enabled);
+            },
+            isDatasetsEnabled() {
+                return snapService.isDatasetsEnabled();
+            },
+            setGuideStep(degrees) {
+                snapService.setGuideStep(degrees);
+            },
+            getOptions() {
+                return snapService.getOptions();
+            },
+            getResult() {
+                return snapService.getResult();
+            },
+            resolve(lngLat, point, ctx) {
+                const screenPoint = point ?? map.project([lngLat.lng, lngLat.lat]);
+                return snapService.resolve(lngLat, { x: screenPoint.x, y: screenPoint.y }, {
+                    zoom: map.getZoom(),
+                    modifiers: { ...NO_MODIFIERS },
+                    ...ctx,
+                });
+            },
+        },
+    };
+}

package/dist/api/topology-api.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The topology settings of a draw instance, reached as `draw.topology`: switching at runtime
+ * the settings that keep editing from breaking boundaries shared by adjacent features.
+ *
+ * The initial values come from {@link Options.topology}. A switch takes effect from the next
+ * drag start and does not affect a drag in progress.
+ *
+ * @example
+ * ```typescript
+ * sharedVertexToggle.onchange = () => {
+ *   draw.topology.setSharedVertexDrag(sharedVertexToggle.checked);
+ * };
+ * ```
+ */
+export interface TopologyOperations {
+    /**
+     * Enables or disables simultaneous movement of shared vertices.
+     *
+     * The initial value is `options.topology.sharedVertexDrag` (the core default is false).
+     * While it is enabled, dragging a vertex also moves other features that have a vertex at
+     * an exact match (tolerance 0), and the following vertices are highlighted during the drag.
+     * The following features must be visible and unlocked, and be of a type whose vertices can
+     * be edited (not Circle, Image or Freehand). The drag commits as one change, one notification.
+     *
+     * @param enabled whether shared vertices move together
+     */
+    setSharedVertexDrag(enabled: boolean): void;
+    /** Whether simultaneous movement of shared vertices is enabled */
+    isSharedVertexDrag(): boolean;
+}

package/dist/api/topology-api.js

@@ -0,0 +1,16 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/** @internal */
+export function createTopologyApi(deps) {
+    const { topology } = deps;
+    return {
+        topology: {
+            setSharedVertexDrag(enabled) {
+                topology.sharedVertexDrag = enabled;
+            },
+            isSharedVertexDrag() {
+                return topology.sharedVertexDrag;
+            },
+        },
+    };
+}

package/dist/api/tracing-api.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The edge tracing of a draw instance, reached as `draw.tracing`.
+ *
+ * In draw_line / draw_polygon, when the previous click and this click both snapped to the
+ * boundary (a vertex or an edge) of the same feature, the boundary vertices between them are
+ * inserted: the shortest path along the edges of the visible features nearby, across shared
+ * vertices. It needs snapping, so it does not hold while snapping is off or released. The
+ * path is previewed while the pointer moves.
+ * The initial value comes from {@link Options.trace}; the path itself is computed by
+ * {@link buildTraceGraph} and {@link findTracePath}.
+ *
+ * @example
+ * ```typescript
+ * draw.tracing.setEnabled(false);
+ * draw.tracing.isEnabled(); // false
+ * ```
+ */
+export interface TracingOperations {
+    /**
+     * Enables or disables tracing.
+     *
+     * The initial value is `options.trace.enabled` (default true). When it is disabled, the
+     * clicks and the preview while drawing add only the point clicked. A change takes effect
+     * from the next click or move.
+     *
+     * @param enabled whether to trace
+     */
+    setEnabled(enabled: boolean): void;
+    /** Whether tracing is enabled */
+    isEnabled(): boolean;
+}

package/dist/api/tracing-api.js

@@ -0,0 +1,16 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/** @internal */
+export function createTracingApi(deps) {
+    const { trace } = deps;
+    return {
+        tracing: {
+            setEnabled(enabled) {
+                trace.enabled = enabled;
+            },
+            isEnabled() {
+                return trace.enabled;
+            },
+        },
+    };
+}

package/dist/dispatcher/hit-test/box-strategies.d.ts

@@ -0,0 +1,19 @@
+import type { BoundingBox, Feature } from '../../store/types.js';
+import type { BoxSelectionStrategy } from './box-strategy.js';
+/**
+ * Box selection test for Circle
+ *
+ * It tests the intersection between the selection box and the ring of the circle, which is
+ * expressed as a center plus a radius (in meters). Testing with the center point alone
+ * would fail to select a circle whose ring overlaps the box widely while its center is
+ * outside the box.
+ *
+ * In geographic coordinate (lng/lat) space a circle becomes an ellipse stretched by a
+ * factor of 1/cos(lat) along the longitude axis, so the latitude axis is normalized by a
+ * factor of rLng/rLat to turn it back into a true circle, and the box is put through the
+ * same transformation before the test.
+ */
+export declare class CircleBoxSelectionStrategy implements BoxSelectionStrategy {
+    readonly featureType: "Circle";
+    intersects(feature: Feature, rect: BoundingBox): boolean;
+}

package/dist/dispatcher/hit-test/box-strategies.js

@@ -0,0 +1,275 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * BoxSelectionStrategies
+ *
+ * The basic BoxSelectionStrategy implementations of the core edition.
+ * They provide the intersection test logic for box selection of each feature type.
+ */
+import { createOBB, DEFAULT_TILE_SIZE, getMetersPerPixel, getOBBCorners, metersToDegreesLat, metersToDegreesLng, pointInRectangle, rectangleIntersectsCircle, rectangleIntersectsLineString, rectangleIntersectsOBB, rectangleIntersectsPolygon, } from '../../shared/math/index.js';
+import { getCircleRadius, getImageProperties } from '../../shared/utils/property.js';
+/**
+ * Box selection test for Point
+ *
+ * It tests whether the center coordinate is contained in the box.
+ *
+ * @internal
+ */
+export class PointBoxSelectionStrategy {
+    constructor() {
+        Object.defineProperty(this, "featureType", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'Point'
+        });
+    }
+    intersects(feature, rect) {
+        if (feature.type !== 'Point')
+            return false;
+        const coord = feature.coordinates;
+        return pointInRectangle(coord, rect);
+    }
+}
+/**
+ * Box selection test for LineString
+ *
+ * It tests the intersection between the geometry and the selection box.
+ * true when any vertex is inside the box, or any edge intersects the box.
+ *
+ * @internal
+ */
+export class LineStringBoxSelectionStrategy {
+    constructor() {
+        Object.defineProperty(this, "featureType", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'LineString'
+        });
+    }
+    intersects(feature, rect) {
+        if (feature.type !== 'LineString')
+            return false;
+        const coords = feature.coordinates;
+        return rectangleIntersectsLineString(rect, coords);
+    }
+}
+/**
+ * Box selection test for Polygon
+ *
+ * It tests the intersection between the geometry and the selection box.
+ * true when any vertex of the polygon is inside the box,
+ * or any vertex of the box is inside the polygon,
+ * or any edge of the polygon intersects the box.
+ *
+ * @internal
+ */
+export class PolygonBoxSelectionStrategy {
+    constructor() {
+        Object.defineProperty(this, "featureType", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'Polygon'
+        });
+    }
+    intersects(feature, rect) {
+        if (feature.type !== 'Polygon')
+            return false;
+        const rings = feature.coordinates;
+        return rectangleIntersectsPolygon(rect, rings);
+    }
+}
+/**
+ * Box selection test for MultiPoint
+ *
+ * true when any part (a point) is inside the box.
+ *
+ * @internal
+ */
+export class MultiPointBoxSelectionStrategy {
+    constructor() {
+        Object.defineProperty(this, "featureType", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'MultiPoint'
+        });
+    }
+    intersects(feature, rect) {
+        if (feature.type !== 'MultiPoint')
+            return false;
+        const parts = feature.coordinates;
+        return parts.some((coord) => pointInRectangle(coord, rect));
+    }
+}
+/**
+ * Box selection test for MultiLineString
+ *
+ * true when any part (a polyline) intersects the box.
+ *
+ * @internal
+ */
+export class MultiLineStringBoxSelectionStrategy {
+    constructor() {
+        Object.defineProperty(this, "featureType", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'MultiLineString'
+        });
+    }
+    intersects(feature, rect) {
+        if (feature.type !== 'MultiLineString')
+            return false;
+        const parts = feature.coordinates;
+        return parts.some((coords) => rectangleIntersectsLineString(rect, coords));
+    }
+}
+/**
+ * Box selection test for MultiPolygon
+ *
+ * true when any part (an array of rings) intersects the box.
+ *
+ * @internal
+ */
+export class MultiPolygonBoxSelectionStrategy {
+    constructor() {
+        Object.defineProperty(this, "featureType", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'MultiPolygon'
+        });
+    }
+    intersects(feature, rect) {
+        if (feature.type !== 'MultiPolygon')
+            return false;
+        const parts = feature.coordinates;
+        return parts.some((rings) => rings.length > 0 && rectangleIntersectsPolygon(rect, rings));
+    }
+}
+/**
+ * Box selection test for Image
+ *
+ * It tests the intersection between the OBB (a bounding box that accounts for the
+ * rotation) and the selection box.
+ *
+ * @internal
+ */
+export class ImageBoxSelectionStrategy {
+    constructor(tileSize = DEFAULT_TILE_SIZE) {
+        Object.defineProperty(this, "featureType", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'Image'
+        });
+        Object.defineProperty(this, "tileSize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.tileSize = tileSize;
+    }
+    intersects(feature, rect) {
+        if (feature.type !== 'Image')
+            return false;
+        const obb = this.createOBBForImage(feature);
+        if (!obb) {
+            // When the OBB cannot be created, test with the coordinate alone
+            const coord = feature.coordinates;
+            return pointInRectangle(coord, rect);
+        }
+        const corners = getOBBCorners(obb);
+        return rectangleIntersectsOBB(rect, { corners });
+    }
+    createOBBForImage(feature) {
+        const properties = getImageProperties(feature);
+        if (!properties.imageFileId)
+            return null;
+        const coord = feature.coordinates;
+        const latitude = coord[1];
+        const style = feature.style;
+        const imageWidth = properties.imageWidth || 100;
+        const imageHeight = properties.imageHeight || 100;
+        const displayWidth = style?.width || imageWidth;
+        const displayHeight = style?.height || imageHeight;
+        const createdZoom = properties.createdZoom || 14;
+        const scale = properties.scale || 1;
+        const widthMeters = getMetersPerPixel(latitude, createdZoom, this.tileSize) * displayWidth * scale;
+        const heightMeters = getMetersPerPixel(latitude, createdZoom, this.tileSize) * displayHeight * scale;
+        const widthDeg = metersToDegreesLng(widthMeters, latitude);
+        const heightDeg = metersToDegreesLat(heightMeters);
+        const rotation = (style?.rotation || 0) + (properties.rotation || 0);
+        return createOBB(coord[0], coord[1], widthDeg, heightDeg, rotation);
+    }
+}
+/**
+ * Box selection test for Circle
+ *
+ * It tests the intersection between the selection box and the ring of the circle, which is
+ * expressed as a center plus a radius (in meters). Testing with the center point alone
+ * would fail to select a circle whose ring overlaps the box widely while its center is
+ * outside the box.
+ *
+ * In geographic coordinate (lng/lat) space a circle becomes an ellipse stretched by a
+ * factor of 1/cos(lat) along the longitude axis, so the latitude axis is normalized by a
+ * factor of rLng/rLat to turn it back into a true circle, and the box is put through the
+ * same transformation before the test.
+ */
+export class CircleBoxSelectionStrategy {
+    constructor() {
+        Object.defineProperty(this, "featureType", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'Circle'
+        });
+    }
+    intersects(feature, rect) {
+        if (feature.type !== 'Circle')
+            return false;
+        const center = feature.coordinates;
+        const radiusMeters = getCircleRadius(feature);
+        if (!radiusMeters || radiusMeters <= 0) {
+            return pointInRectangle(center, rect);
+        }
+        const rLng = metersToDegreesLng(radiusMeters, center[1]);
+        const rLat = metersToDegreesLat(radiusMeters);
+        if (rLng <= 0 || rLat <= 0) {
+            return pointInRectangle(center, rect);
+        }
+        // Normalize the latitude axis by k = rLng/rLat -> the ellipse becomes a true circle of
+        // radius rLng. The box is axis-aligned, so multiplying each y coordinate by k is an
+        // equivalent transformation.
+        const k = rLng / rLat;
+        const normRect = {
+            minX: rect.minX,
+            maxX: rect.maxX,
+            minY: rect.minY * k,
+            maxY: rect.maxY * k,
+        };
+        const normCenter = [center[0], center[1] * k];
+        return rectangleIntersectsCircle(normRect, normCenter, rLng);
+    }
+}
+/**
+ * Creates every BoxSelectionStrategy of the core edition
+ *
+ * @internal
+ */
+export function createCoreBoxSelectionStrategies(tileSize = DEFAULT_TILE_SIZE) {
+    return [
+        new PointBoxSelectionStrategy(),
+        new LineStringBoxSelectionStrategy(),
+        new PolygonBoxSelectionStrategy(),
+        new MultiPointBoxSelectionStrategy(),
+        new MultiLineStringBoxSelectionStrategy(),
+        new MultiPolygonBoxSelectionStrategy(),
+        new CircleBoxSelectionStrategy(),
+        new ImageBoxSelectionStrategy(tileSize),
+    ];
+}