@sakuzu/maplibre-gl-draw 1.0.0

package/dist/modes/cursor.js

@@ -0,0 +1,72 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { getCursorForHandle, hitTestHandles, } from '../view/ui/handle-test.js';
+/**
+ * Cursor management class
+ *
+ * @internal
+ */
+export class CursorManager {
+    constructor(canvas, defaultCursor = 'default') {
+        Object.defineProperty(this, "canvas", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "defaultCursor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.canvas = canvas;
+        this.defaultCursor = defaultCursor;
+    }
+    /**
+     * Sets the default cursor
+     */
+    setDefault() {
+        this.canvas.style.cursor = this.defaultCursor;
+    }
+    /**
+     * Sets the cursor
+     */
+    set(cursor) {
+        this.canvas.style.cursor = cursor;
+    }
+    /**
+     * Sets the cursor based on the handle hit result
+     */
+    setForHandle(handleHit) {
+        this.canvas.style.cursor = getCursorForHandle(handleHit);
+    }
+    /**
+     * Sets the pointer cursor
+     */
+    setPointer() {
+        this.canvas.style.cursor = 'pointer';
+    }
+    /**
+     * Sets the text cursor
+     */
+    setText() {
+        this.canvas.style.cursor = 'text';
+    }
+    /**
+     * Updates the cursor based on the selected features and the mouse position
+     *
+     * @returns true if a handle was hit
+     */
+    updateForSelection(screenPoint, selectedFeatures, bbox, transform, config, zoom, scope) {
+        if (!bbox || selectedFeatures.length === 0) {
+            return false;
+        }
+        const handleHit = hitTestHandles(screenPoint, selectedFeatures, transform, config, zoom, scope);
+        if (handleHit) {
+            this.setForHandle(handleHit);
+            return true;
+        }
+        return false;
+    }
+}

package/dist/modes/draw/circle.d.ts

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

package/dist/modes/draw/circle.js

@@ -0,0 +1,222 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { haversineDistanceMeters, initialBearingDegrees } from '../../geometry/index.js';
+import { createdZoomProperty, resolveCommitLayer } from './commit-layer.js';
+/** Default angle of the radius handle (toward the lower right) */
+const DEFAULT_RADIUS_HANDLE_ANGLE = 135;
+/** Minimum radius (in meters) */
+const MIN_RADIUS_METERS = 1;
+/**
+ * DrawCircleMode implementation
+ *
+ * @internal
+ */
+export class DrawCircleMode {
+    constructor() {
+        Object.defineProperty(this, "modeName", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'draw_circle'
+        });
+        Object.defineProperty(this, "writesFeatures", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** Center coordinate of the circle */
+        Object.defineProperty(this, "center", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        /** Radius (in meters) */
+        Object.defineProperty(this, "radiusMeters", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        /** Angle of the radius handle (in degrees) */
+        Object.defineProperty(this, "radiusHandleAngle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: DEFAULT_RADIUS_HANDLE_ANGLE
+        });
+        /** Drawing phase: 'waiting' = the center is not set yet, 'adjusting' = adjusting the radius */
+        Object.defineProperty(this, "phase", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'waiting'
+        });
+        /** The Feature ID that is going to be created */
+        Object.defineProperty(this, "pendingFeatureId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+    }
+    onStart(context) {
+        this.context = context;
+        // Change the cursor to a crosshair
+        this.context.map.getCanvas().style.cursor = 'crosshair';
+        // Clear the selection (not notified as a change)
+        this.context.store.transact(() => {
+            this.context.store.setSelection(null, []);
+        }, 'silent');
+        // Reset the state
+        this.reset();
+        // Generate the Feature ID in advance
+        this.pendingFeatureId = this.context.generateFeatureId();
+    }
+    onStop() {
+        // Restore the cursor
+        this.context.map.getCanvas().style.cursor = '';
+        // Clear the tentative state
+        this.context.store.setTentative(null);
+        this.reset();
+    }
+    /**
+     * A double click while drawing is two clicks of the drawing; it never zooms the map
+     * (consumed by preventing its default action)
+     */
+    onDoubleClick(event) {
+        event.originalEvent.preventDefault();
+    }
+    onClick(event) {
+        const coord = [event.lngLat.lng, event.lngLat.lat];
+        if (this.phase === 'waiting') {
+            // Set the center
+            this.center = coord;
+            this.phase = 'adjusting';
+            this.radiusMeters = 0;
+            // Update the tentative state
+            this.updateTentative();
+        }
+        else if (this.phase === 'adjusting') {
+            // Confirm if the radius is at least the minimum value
+            if (this.radiusMeters >= MIN_RADIUS_METERS) {
+                this.finishCircle();
+            }
+        }
+    }
+    onMouseMove(event) {
+        if (this.phase === 'adjusting' && this.center) {
+            // Compute the distance from the center to the mouse position
+            const mouseCoord = [event.lngLat.lng, event.lngLat.lat];
+            this.radiusMeters = haversineDistanceMeters(this.center, mouseCoord);
+            // The great-circle bearing from the center to the mouse position. The handle is placed
+            // with destinationPoint, the inverse of this bearing, so it lands on the pointer
+            this.radiusHandleAngle = initialBearingDegrees(this.center, mouseCoord);
+            // Update the tentative state
+            this.updateTentative();
+        }
+    }
+    onKeyDown(event) {
+        if (event.key === 'Escape') {
+            if (this.phase === 'adjusting') {
+                // Cancel if drawing is in progress
+                this.reset();
+                this.context.store.setTentative(null);
+            }
+            else {
+                // Return to the select mode if drawing is not in progress
+                this.context.setMode('select');
+            }
+        }
+    }
+    /**
+     * Called after an external state change
+     *
+     * Resets the state of the drawing in progress so that the next drawing operation can start
+     * normally.
+     */
+    onExternalStateChange() {
+        this.reset();
+        this.context.store.setTentative(null);
+    }
+    /**
+     * Confirms the circle
+     */
+    finishCircle() {
+        if (!this.center || this.radiusMeters < MIN_RADIUS_METERS) {
+            return;
+        }
+        const { store, autoNameGenerator } = this.context;
+        // Discard the drawing when no layer can be written any more
+        const layerId = resolveCommitLayer(this.context);
+        if (layerId === null)
+            return;
+        // Generate the automatic name
+        const autoName = autoNameGenerator.generateName('Circle');
+        // Use the ID generated in advance (generate a new one if there is none)
+        const featureId = this.pendingFeatureId ?? this.context.generateFeatureId();
+        // Create a new circle feature
+        const feature = {
+            id: featureId,
+            type: 'Circle',
+            coordinates: this.center,
+            layerId,
+            properties: {
+                radiusMeters: this.radiusMeters,
+                radiusHandleAngle: this.radiusHandleAngle,
+                ...createdZoomProperty(this.context),
+                // The polygon coordinates for rendering are computed at render time, so they are not saved
+                ...(autoName !== undefined && { name: autoName }),
+            },
+            locked: false,
+            visible: true,
+        };
+        // Bundle the feature creation and the selection into a single transaction
+        // (so that both are undone at once on undo)
+        store.transact(() => {
+            store.createFeature(feature);
+            // Clear the tentative state
+            store.setTentative(null);
+            // Select the created feature
+            store.setSelection('feature', [feature.id]);
+        });
+        // Reset the state
+        this.reset();
+        // Return to the select mode
+        this.context.setMode('select');
+    }
+    /**
+     * Updates the tentative state
+     */
+    updateTentative() {
+        if (!this.center) {
+            this.context.store.setTentative(null);
+            return;
+        }
+        this.context.store.setTentative({
+            type: 'Circle',
+            coordinates: this.center,
+            layerId: this.context.getCurrentLayerId(),
+            radiusMeters: this.radiusMeters,
+            radiusHandleAngle: this.radiusHandleAngle,
+            pendingFeatureId: this.pendingFeatureId ?? undefined,
+        });
+    }
+    /**
+     * Resets the state
+     */
+    reset() {
+        this.center = null;
+        this.radiusMeters = 0;
+        this.radiusHandleAngle = DEFAULT_RADIUS_HANDLE_ANGLE;
+        this.phase = 'waiting';
+        this.pendingFeatureId = null;
+    }
+}

package/dist/modes/draw/commit-layer.d.ts

@@ -0,0 +1,26 @@
+/**
+ * What a drawing mode writes when it commits: the layer, and the created zoom
+ */
+import type { ModeContext } from '../handler.js';
+/**
+ * Resolves the layer a drawing mode commits a new feature into
+ *
+ * Applies the commit rule of `ModeContext.getCurrentLayerId`: it returns the writable layer,
+ * and when no layer can be written any more (the layer was deleted, locked or hidden while
+ * drawing), the drawing is discarded instead: the tentative state is cleared and the mode
+ * returns to select, which stops the current handler. The caller then returns without
+ * creating anything, so no exception reaches the input handling. A plugin mode follows the
+ * same rule through the ModeContext.
+ */
+export declare function resolveCommitLayer(context: ModeContext): string | null;
+/**
+ * The created zoom a drawing mode writes into the properties of a new feature
+ *
+ * When the instance lets line widths follow the zoom (`ModeContext.scaleWithZoom`), it is the
+ * zoom at the time of the commit, from which the widths grow and shrink with the map. Otherwise
+ * nothing is written, and the feature keeps its widths on the screen like one added through
+ * the API.
+ */
+export declare function createdZoomProperty(context: ModeContext): {
+    createdZoom?: number;
+};

package/dist/modes/draw/commit-layer.js

@@ -0,0 +1,31 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * Resolves the layer a drawing mode commits a new feature into
+ *
+ * Applies the commit rule of `ModeContext.getCurrentLayerId`: it returns the writable layer,
+ * and when no layer can be written any more (the layer was deleted, locked or hidden while
+ * drawing), the drawing is discarded instead: the tentative state is cleared and the mode
+ * returns to select, which stops the current handler. The caller then returns without
+ * creating anything, so no exception reaches the input handling. A plugin mode follows the
+ * same rule through the ModeContext.
+ */
+export function resolveCommitLayer(context) {
+    const layerId = context.getCurrentLayerId();
+    if (layerId !== '')
+        return layerId;
+    context.store.setTentative(null);
+    context.setMode('select');
+    return null;
+}
+/**
+ * The created zoom a drawing mode writes into the properties of a new feature
+ *
+ * When the instance lets line widths follow the zoom (`ModeContext.scaleWithZoom`), it is the
+ * zoom at the time of the commit, from which the widths grow and shrink with the map. Otherwise
+ * nothing is written, and the feature keeps its widths on the screen like one added through
+ * the API.
+ */
+export function createdZoomProperty(context) {
+    return context.scaleWithZoom ? { createdZoom: context.map.getZoom() } : {};
+}

package/dist/modes/draw/freehand.d.ts

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

package/dist/modes/draw/freehand.js

@@ -0,0 +1,264 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { createdZoomProperty, resolveCommitLayer } from './commit-layer.js';
+/** Minimum distance for adding a coordinate (in degrees) */
+const MIN_DISTANCE_DEGREES = 0.00001;
+/**
+ * The input types that are not passed through snapping (the points inside a stroke)
+ *
+ * The snapping tolerance is a value premised on "once per click", so applying it to dragmove,
+ * which passes several hundred points in a single stroke, pulls the intermediate sample points
+ * one after another to nearby vertices and edges, and a line the user meant to draw straight
+ * ends up bent (this is conspicuous when dense administrative boundaries and the like are
+ * displayed). Furthermore, when snapping collapses consecutive samples onto the same point,
+ * they are discarded by the MIN_DISTANCE_DEGREES sieve, and the line jumps all at once the
+ * moment it leaves the tolerance.
+ *
+ * The start and the end of the drag remain snapped, which keeps "start drawing exactly from a
+ * corner of a boundary and end at a corner".
+ */
+const UNSNAPPED_INPUT_TYPES = new Set(['dragmove']);
+/**
+ * DrawFreehandMode implementation
+ *
+ * @internal
+ */
+export class DrawFreehandMode {
+    constructor() {
+        Object.defineProperty(this, "modeName", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'draw_freehand'
+        });
+        Object.defineProperty(this, "writesFeatures", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** Whether a drag is in progress */
+        Object.defineProperty(this, "isDrawing", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        /** Coordinates of the current stroke */
+        Object.defineProperty(this, "currentCoordinates", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        /** The Feature ID that is going to be created */
+        Object.defineProperty(this, "pendingFeatureId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+    }
+    /**
+     * Whether snapping is to be applied, per input type
+     *
+     * Snapping is refused only inside a stroke (dragmove); the start point (dragstart) and the
+     * end point (dragend) are snapped.
+     */
+    isSnapEnabledFor(inputType) {
+        return !UNSNAPPED_INPUT_TYPES.has(inputType);
+    }
+    onStart(context) {
+        this.context = context;
+        // Change the cursor to a crosshair
+        this.context.map.getCanvas().style.cursor = 'crosshair';
+        // Clear the selection (not notified as a change)
+        this.context.store.transact(() => {
+            this.context.store.setSelection(null, []);
+        }, 'silent');
+        // Reset the state
+        this.reset();
+    }
+    onStop() {
+        // Restore the cursor
+        this.context.map.getCanvas().style.cursor = '';
+        // Clear the tentative state
+        this.context.store.setTentative(null);
+        this.reset();
+        // Re-enable the dragPan of MapLibre
+        if (!this.context.map.dragPan.isEnabled()) {
+            this.context.map.dragPan.enable();
+        }
+    }
+    /**
+     * Called after an external state change
+     *
+     * Resets the state of the drawing in progress so that the next drawing operation can start
+     * normally.
+     */
+    onExternalStateChange() {
+        this.reset();
+        this.context.store.setTentative(null);
+    }
+    /**
+     * Disables dragPan on a mouse down
+     * @returns true consumes the event (blocks the subsequent processing)
+     */
+    onMouseDown() {
+        // Disable the dragPan of MapLibre so that dragging is enabled
+        this.context.map.dragPan.disable();
+        return false;
+    }
+    onDragStart(event) {
+        // Start drawing
+        this.isDrawing = true;
+        this.currentCoordinates = [[event.lngLat.lng, event.lngLat.lat]];
+        // Generate the Feature ID in advance (for each stroke)
+        this.pendingFeatureId = this.context.generateFeatureId();
+        // Update the tentative state
+        this.updateTentative();
+    }
+    onDragMove(event) {
+        if (!this.isDrawing)
+            return;
+        const newCoord = [event.lngLat.lng, event.lngLat.lat];
+        // Check the distance from the last coordinate
+        if (this.currentCoordinates.length > 0) {
+            const lastCoord = this.currentCoordinates[this.currentCoordinates.length - 1];
+            const dx = newCoord[0] - lastCoord[0];
+            const dy = newCoord[1] - lastCoord[1];
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            // Do not add it if it is below the minimum distance
+            if (distance < MIN_DISTANCE_DEGREES) {
+                return;
+            }
+        }
+        // Add the coordinate
+        this.currentCoordinates.push(newCoord);
+        // Update the tentative state
+        this.updateTentative();
+    }
+    onDragEnd(event) {
+        if (!this.isDrawing)
+            return;
+        // Add the last coordinate
+        const endCoord = [event.lngLat.lng, event.lngLat.lat];
+        if (this.currentCoordinates.length > 0) {
+            const lastCoord = this.currentCoordinates[this.currentCoordinates.length - 1];
+            const dx = endCoord[0] - lastCoord[0];
+            const dy = endCoord[1] - lastCoord[1];
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance >= MIN_DISTANCE_DEGREES) {
+                this.currentCoordinates.push(endCoord);
+            }
+        }
+        // Confirm the stroke
+        this.finishStroke();
+        // End the drawing (the mode is kept active)
+        this.isDrawing = false;
+        this.currentCoordinates = [];
+        this.context.store.setTentative(null);
+        // Re-enable the dragPan of MapLibre (until the next drag)
+        this.context.map.dragPan.enable();
+    }
+    /**
+     * The press ended without a release (a second finger, or the browser cancelled the touch)
+     *
+     * The stroke in progress is discarded, and the pan goes back to MapLibre.
+     */
+    onDragCancel() {
+        if (this.isDrawing) {
+            this.reset();
+            this.context.store.setTentative(null);
+        }
+        if (!this.context.map.dragPan.isEnabled()) {
+            this.context.map.dragPan.enable();
+        }
+    }
+    onKeyDown(event) {
+        if (event.key === 'Escape') {
+            if (this.isDrawing) {
+                // Cancel if drawing is in progress
+                this.isDrawing = false;
+                this.currentCoordinates = [];
+                this.context.store.setTentative(null);
+            }
+            else {
+                // Return to the select mode if drawing is not in progress
+                this.context.setMode('select');
+            }
+        }
+    }
+    /**
+     * Confirms the stroke and creates the feature
+     */
+    finishStroke() {
+        // At least two points are required
+        if (this.currentCoordinates.length < 2) {
+            return;
+        }
+        const { store, autoNameGenerator } = this.context;
+        // Discard the drawing when no layer can be written any more
+        const layerId = resolveCommitLayer(this.context);
+        if (layerId === null)
+            return;
+        // Generate the automatic name
+        const autoName = autoNameGenerator.generateName('Freehand');
+        // Use the ID generated in advance (generate a new one if there is none)
+        const featureId = this.pendingFeatureId ?? this.context.generateFeatureId();
+        // Create a new freehand feature
+        const feature = {
+            id: featureId,
+            type: 'Freehand',
+            coordinates: [...this.currentCoordinates],
+            layerId,
+            properties: {
+                ...createdZoomProperty(this.context),
+                ...(autoName !== undefined && { name: autoName }),
+            },
+            style: {
+                // Uses the same default color as LineString
+                // (lineString.stroke.color of feature-style-config)
+                strokeWidth: 3,
+            },
+            locked: false,
+            visible: true,
+        };
+        // Create the feature inside a transaction (notified as a single change)
+        store.transact(() => {
+            store.createFeature(feature);
+        });
+        // Clear pendingFeatureId
+        this.pendingFeatureId = null;
+        // Note: the feature is not selected after creation (so that drawing can continue)
+    }
+    /**
+     * Updates the tentative state
+     */
+    updateTentative() {
+        if (this.currentCoordinates.length === 0) {
+            this.context.store.setTentative(null);
+            return;
+        }
+        this.context.store.setTentative({
+            type: 'Freehand',
+            coordinates: [...this.currentCoordinates],
+            layerId: this.context.getCurrentLayerId(),
+            pendingFeatureId: this.pendingFeatureId ?? undefined,
+        });
+    }
+    /**
+     * Resets the state
+     */
+    reset() {
+        this.isDrawing = false;
+        this.currentCoordinates = [];
+        this.pendingFeatureId = null;
+    }
+}

package/dist/modes/draw/image.d.ts

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

package/dist/modes/draw/image.js

@@ -0,0 +1,60 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { resolveCommitLayer } from './commit-layer.js';
+/**
+ * DrawImageMode implementation
+ *
+ * @internal
+ */
+export class DrawImageMode {
+    constructor() {
+        Object.defineProperty(this, "modeName", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'draw_image'
+        });
+        Object.defineProperty(this, "writesFeatures", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+    }
+    onStart(context) {
+        this.context = context;
+        const { map, store, eventEmitter } = this.context;
+        // Set the cursor to the default
+        map.getCanvas().style.cursor = 'default';
+        // Clear the selection (not notified as a change)
+        store.transact(() => {
+            store.setSelection(null, []);
+        }, 'silent');
+        // Get the center coordinate and the zoom of the map
+        const center = map.getCenter();
+        const coordinate = [center.lng, center.lat];
+        const zoom = map.getZoom();
+        // Nothing is requested when no layer can be written (the mode returns to select)
+        const layerId = resolveCommitLayer(this.context);
+        if (layerId === null)
+            return;
+        // Emit the event and delegate the file selection to the demo side
+        eventEmitter.emit('image.request', { coordinate, zoom, layerId });
+        // Return to the select mode
+        this.context.setMode('select');
+    }
+    onStop() {
+        this.context.map.getCanvas().style.cursor = '';
+    }
+    onKeyDown(event) {
+        if (event.key === 'Escape') {
+            this.context.setMode('select');
+        }
+    }
+}

package/dist/modes/draw/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Draw Modes module
+ */
+export { DrawCircleMode } from './circle.js';
+export { DrawFreehandMode } from './freehand.js';
+export { DrawImageMode } from './image.js';
+export { DrawLineMode } from './line.js';
+export { DrawPointMode } from './point.js';
+export { DrawPolygonMode } from './polygon.js';