@sakuzu/maplibre-gl-draw 1.0.0

package/dist/modes/draw/index.js

@@ -0,0 +1,11 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * 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';

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

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

package/dist/modes/draw/line.js

@@ -0,0 +1,363 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { createdZoomProperty, resolveCommitLayer } from './commit-layer.js';
+import { computeTracePath, isTraceEnabled, readTraceAnchor } from './trace-support.js';
+/** Tolerance for deciding a vertex click (in pixels) */
+const VERTEX_CLICK_TOLERANCE = 10;
+/**
+ * DrawLineMode implementation
+ *
+ * @internal
+ */
+export class DrawLineMode {
+    constructor() {
+        Object.defineProperty(this, "modeName", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'draw_line'
+        });
+        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
+        });
+        Object.defineProperty(this, "coordinates", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "isNearLastVertex", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        /** The redo stack (holds the undone vertices) */
+        Object.defineProperty(this, "redoStack", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        /** The last mouse coordinate (for displaying the dashed line on undo/redo) */
+        Object.defineProperty(this, "lastMouseCoord", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        /** The Feature ID that is going to be created */
+        Object.defineProperty(this, "pendingFeatureId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        /**
+         * The snap target of the previously confirmed click (the start point of the trace)
+         *
+         * It is reset to null for a click that did not snap and for a snap that cannot be traced.
+         */
+        Object.defineProperty(this, "traceAnchor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        /**
+         * The trace path up to the cursor position (the unconfirmed vertices for the preview)
+         *
+         * They are inserted between the confirmed coordinates and the cursor point and drawn as
+         * tentative.
+         */
+        Object.defineProperty(this, "tracePreview", {
+            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.coordinates = [];
+        this.isNearLastVertex = false;
+        this.redoStack = [];
+        this.lastMouseCoord = null;
+        this.traceAnchor = null;
+        this.tracePreview = null;
+        // 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.coordinates = [];
+    }
+    /**
+     * Called after an external state change
+     *
+     * Resets the state of the drawing in progress so that the next drawing operation can start
+     * normally.
+     */
+    onExternalStateChange() {
+        // Reset the state
+        this.coordinates = [];
+        this.redoStack = [];
+        this.lastMouseCoord = null;
+        this.pendingFeatureId = null;
+        this.isNearLastVertex = false;
+        this.traceAnchor = null;
+        this.tracePreview = null;
+        // Clear the tentative state
+        this.context.store.setTentative(null);
+    }
+    /**
+     * 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) {
+        // Complete when there are at least two points and the click is near the last vertex
+        if (this.coordinates.length >= 2 && this.isNearLastVertex) {
+            this.finishLine();
+            return;
+        }
+        // Read the snap target of this click and first take in the sequence of boundary vertices
+        // between it and the previously confirmed click (tracing)
+        const anchor = readTraceAnchor(this.context, event);
+        const path = computeTracePath(this.context, this.traceAnchor, anchor);
+        if (path) {
+            this.coordinates.push(...path);
+        }
+        this.traceAnchor = anchor;
+        this.tracePreview = null;
+        // Add the vertex
+        const coord = [event.lngLat.lng, event.lngLat.lat];
+        this.coordinates.push(coord);
+        // Clear the redo stack when a new vertex is added
+        this.redoStack = [];
+        // Update the tentative state
+        // Note: the redraw is triggered automatically by RenderCoordinator subscribing to Store changes
+        this.updateTentative();
+    }
+    onMouseMove(event) {
+        // Save the last mouse coordinate (for displaying the dashed line on undo/redo)
+        this.lastMouseCoord = [event.lngLat.lng, event.lngLat.lat];
+        // Check whether it is near the last vertex
+        this.isNearLastVertex = this.checkNearLastVertex(event.point);
+        // When the snap target of the cursor is the same feature as the previously confirmed
+        // click, hold the path that is going to be inserted as a preview
+        this.tracePreview = computeTracePath(this.context, this.traceAnchor, readTraceAnchor(this.context, event));
+        // Update the cursor
+        if (this.coordinates.length >= 2 && this.isNearLastVertex) {
+            this.context.map.getCanvas().style.cursor = 'pointer';
+        }
+        else {
+            this.context.map.getCanvas().style.cursor = 'crosshair';
+        }
+        // When there is at least one vertex, display the line up to the mouse position
+        if (this.coordinates.length > 0) {
+            this.updateTentative(this.lastMouseCoord);
+        }
+    }
+    onKeyDown(event) {
+        if (event.key === 'Escape') {
+            // Cancel
+            this.cancelLine();
+        }
+        else if (event.key === 'Enter') {
+            // Confirm
+            this.finishLine();
+        }
+        else if (event.key === 'Backspace' || event.key === 'Delete') {
+            // Remove the last vertex
+            this.removeLastVertex();
+        }
+    }
+    /**
+     * The feature to prefer when snapping candidates are tied (the boundary that tracing started
+     * along)
+     */
+    getSnapPreference() {
+        if (!this.traceAnchor || !isTraceEnabled(this.context))
+            return null;
+        return {
+            featureId: this.traceAnchor.featureId,
+            datasetId: this.traceAnchor.datasetId,
+        };
+    }
+    /**
+     * Checks whether it is near the last vertex
+     */
+    checkNearLastVertex(screenPoint) {
+        if (this.coordinates.length === 0)
+            return false;
+        const lastCoord = this.coordinates[this.coordinates.length - 1];
+        const lastScreenPoint = this.context.map.project(lastCoord);
+        const dx = screenPoint.x - lastScreenPoint.x;
+        const dy = screenPoint.y - lastScreenPoint.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        return distance <= VERTEX_CLICK_TOLERANCE;
+    }
+    /**
+     * Confirms the line
+     */
+    finishLine() {
+        // At least two points are required
+        if (this.coordinates.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('LineString');
+        // Use the ID generated in advance (generate a new one if there is none)
+        const featureId = this.pendingFeatureId ?? this.context.generateFeatureId();
+        // Create a new line feature
+        const feature = {
+            id: featureId,
+            type: 'LineString',
+            coordinates: [...this.coordinates],
+            layerId,
+            properties: {
+                ...createdZoomProperty(this.context),
+                ...(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.coordinates = [];
+        this.isNearLastVertex = false;
+        this.pendingFeatureId = null;
+        this.traceAnchor = null;
+        this.tracePreview = null;
+        // Return to the select mode
+        this.context.setMode('select');
+    }
+    /**
+     * Cancels the creation of the line
+     */
+    cancelLine() {
+        if (this.coordinates.length > 0) {
+            this.coordinates = [];
+            this.pendingFeatureId = null;
+            this.traceAnchor = null;
+            this.tracePreview = null;
+            this.context.store.setTentative(null);
+        }
+        else {
+            // Return to the select mode if drawing is not in progress
+            this.context.setMode('select');
+        }
+    }
+    /**
+     * Removes the last vertex
+     */
+    removeLastVertex() {
+        if (this.coordinates.length > 0) {
+            this.coordinates.pop();
+            // A vertex removed with Backspace/Delete cannot be redone
+            this.redoStack = [];
+            // The previously confirmed click changes, so the start point of the trace is discarded too
+            this.clearTrace();
+            this.updateTentative();
+        }
+    }
+    /**
+     * Undoes a vertex while drawing
+     */
+    undoVertex() {
+        if (this.coordinates.length === 0) {
+            return false;
+        }
+        const removed = this.coordinates.pop();
+        this.redoStack.push(removed);
+        this.clearTrace();
+        // Pass the mouse coordinate to keep the dashed line
+        this.updateTentative(this.lastMouseCoord ?? undefined);
+        return true;
+    }
+    /**
+     * Redoes a vertex that was undone
+     */
+    redoVertex() {
+        if (this.redoStack.length === 0) {
+            return false;
+        }
+        const restored = this.redoStack.pop();
+        this.coordinates.push(restored);
+        this.clearTrace();
+        // Pass the mouse coordinate to keep the dashed line
+        this.updateTentative(this.lastMouseCoord ?? undefined);
+        return true;
+    }
+    /**
+     * Discards the state of the trace
+     *
+     * On an undo / redo of a vertex the "previously confirmed click" changes, so the snap target
+     * that was held as the start point is not kept in use as it is.
+     */
+    clearTrace() {
+        this.traceAnchor = null;
+        this.tracePreview = null;
+    }
+    /**
+     * Updates the tentative state
+     */
+    updateTentative(mouseCoord) {
+        if (this.coordinates.length === 0) {
+            this.context.store.setTentative(null);
+            return;
+        }
+        // The coordinate array including the mouse position and the trace path up to it
+        // (the confirmed ones remain the leading coordinates.length entries)
+        const coords = mouseCoord
+            ? [...this.coordinates, ...(this.tracePreview ?? []), mouseCoord]
+            : [...this.coordinates];
+        // Highlight it when the cursor is near the last vertex
+        const highlightedVertexIndex = this.coordinates.length >= 2 && this.isNearLastVertex
+            ? this.coordinates.length - 1
+            : undefined;
+        this.context.store.setTentative({
+            type: 'LineString',
+            coordinates: coords,
+            layerId: this.context.getCurrentLayerId(),
+            confirmedCount: this.coordinates.length, // The number of confirmed coordinates
+            highlightedVertexIndex,
+            pendingFeatureId: this.pendingFeatureId ?? undefined,
+        });
+    }
+}

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

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

package/dist/modes/draw/point.js

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { createdZoomProperty, resolveCommitLayer } from './commit-layer.js';
+/**
+ * DrawPointMode implementation
+ *
+ * @internal
+ */
+export class DrawPointMode {
+    constructor() {
+        Object.defineProperty(this, "modeName", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'draw_point'
+        });
+        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;
+        // 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');
+    }
+    onStop() {
+        // Restore the cursor
+        this.context.map.getCanvas().style.cursor = '';
+    }
+    /**
+     * 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 { store, generateFeatureId, 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('Point');
+        // Create a new point feature
+        const feature = {
+            id: generateFeatureId(),
+            type: 'Point',
+            coordinates: [event.lngLat.lng, event.lngLat.lat],
+            layerId,
+            properties: {
+                ...createdZoomProperty(this.context),
+                ...(autoName !== undefined && { name: autoName }),
+            },
+            locked: false,
+            visible: true,
+        };
+        // Create the feature (notified as a change)
+        store.transact(() => {
+            store.createFeature(feature);
+            // Select the created feature
+            store.setSelection('feature', [feature.id]);
+        });
+        // Transition to the select mode
+        // Note: the redraw is triggered automatically by RenderCoordinator subscribing to Store changes
+        this.context.setMode('select');
+    }
+    onKeyDown(event) {
+        // Escape returns to the select mode
+        if (event.key === 'Escape') {
+            this.context.setMode('select');
+        }
+    }
+}

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

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