@sakuzu/maplibre-gl-draw 1.0.0 → 2.0.0

package/dist/modes/draw/line.js

@@ -1,363 +1,27 @@
 // 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;
+import { createVertexDrawing } from './vertex-drawing.js';
 /**
- * DrawLineMode implementation
+ * The factory of the line drawing mode
  *
  * @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;
+export const drawLineMode = (ctx) => createVertexDrawing(ctx, {
+    minVertices: 2,
+    // The last vertex finishes the line
+    closingVertex: (vertices) => vertices.length - 1,
+    preview(vertices, pointer, closable) {
+        const coordinates = pointer ? [...vertices, ...pointer] : [...vertices];
         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 }),
+            feature: { type: 'LineString', geometry: { type: 'LineString', coordinates } },
+            options: {
+                confirmedVertices: vertices.length,
+                ...(closable && { highlightVertex: vertices.length - 1 }),
             },
-            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,
-        });
-    }
-}
+    },
+    feature: (vertices) => ({
+        type: 'LineString',
+        geometry: { type: 'LineString', coordinates: [...vertices] },
+    }),
+});

package/dist/modes/draw/point.js

@@ -1,87 +1,38 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
-import { createdZoomProperty, resolveCommitLayer } from './commit-layer.js';
 /**
- * DrawPointMode implementation
+ * The factory of the point drawing mode
  *
  * @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();
-    }
+export const drawPointMode = (ctx) => ({
+    writes: true,
+    onEnter() {
+        ctx.cursor.set('crosshair');
+        // Entering a drawing mode clears the selection, as a change nobody records
+        ctx.draw.transact(() => ctx.draw.selection.clear(), { source: 'silent' });
+    },
+    onExit() {
+        ctx.cursor.reset();
+    },
+    // A double click while drawing is two clicks of the drawing; it never zooms the map
+    onDoubleClick: () => true,
     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]);
+        ctx.draw.transact(() => {
+            const feature = ctx.commitFeature({
+                type: 'Point',
+                geometry: { type: 'Point', coordinates: event.snapped.lngLat },
+            });
+            if (feature)
+                ctx.draw.selection.set('feature', [feature.id]);
         });
-        // Transition to the select mode
-        // Note: the redraw is triggered automatically by RenderCoordinator subscribing to Store changes
-        this.context.setMode('select');
-    }
+        ctx.setMode('select');
+        return true;
+    },
     onKeyDown(event) {
-        // Escape returns to the select mode
-        if (event.key === 'Escape') {
-            this.context.setMode('select');
-        }
-    }
-}
+        if (event.key !== 'Escape')
+            return false;
+        ctx.setMode('select');
+        return true;
+    },
+});