@sakuzu/maplibre-gl-draw 1.0.0 → 2.0.0

package/dist/modes/draw/freehand.js

@@ -1,264 +1,126 @@
 // 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) */
+/** Minimum distance for adding a position (in degrees) */
 const MIN_DISTANCE_DEGREES = 0.00001;
 /**
- * The input types that are not passed through snapping (the points inside a stroke)
+ * The positions inside a stroke are not snapped
  *
- * 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,
+ * The snapping tolerance is a value premised on "once per click", so applying it to the moves
+ * of a drag, which pass several hundred points in a single stroke, pulls the points in the
+ * middle 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']);
+const SNAP_PREFERENCE = { unsnapped: ['onDrag'] };
+/** Whether a position is far enough from the last one to be added */
+function farEnough(last, next) {
+    if (!last)
+        return true;
+    return Math.hypot(next[0] - last[0], next[1] - last[1]) >= MIN_DISTANCE_DEGREES;
+}
 /**
- * DrawFreehandMode implementation
+ * The factory of the freehand drawing mode
  *
  * @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)
+export const drawFreehandMode = (ctx) => {
+    const map = ctx.draw.getMap();
+    /** The positions of the stroke being drawn, or null between strokes */
+    let stroke = null;
+    const releasePan = () => {
+        if (!map.dragPan.isEnabled())
+            map.dragPan.enable();
+    };
+    const dropStroke = () => {
+        stroke = null;
+        ctx.preview.clear();
+    };
+    const showPreview = () => {
+        if (!stroke)
             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);
+        ctx.preview.set({ type: 'Freehand', geometry: { type: 'LineString', coordinates: stroke } });
+    };
+    return {
+        writes: true,
+        snapPreference: SNAP_PREFERENCE,
+        onEnter() {
+            ctx.cursor.set('crosshair');
+            ctx.draw.transact(() => ctx.draw.selection.clear(), { source: 'silent' });
+            stroke = null;
+        },
+        onExit() {
+            ctx.cursor.reset();
+            dropStroke();
+            releasePan();
+        },
+        // What was being drawn is dropped when the state is reset from outside
+        onCancel: dropStroke,
+        onPointerDown() {
+            // The drag draws instead of panning the map; the press itself goes on to the map
+            map.dragPan.disable();
+            return false;
+        },
+        // A press released without a drag drew nothing: the map pans again
+        onPointerUp() {
+            if (!stroke)
+                releasePan();
+            return false;
+        },
+        // The two clicks of a double click drew nothing, and the map does not zoom
+        onDoubleClick: () => true,
+        onDragStart(event) {
+            stroke = [event.snapped.lngLat];
+            showPreview();
+            return true;
+        },
+        onDrag(event) {
+            if (!stroke)
+                return false;
+            const next = event.snapped.lngLat;
+            if (farEnough(stroke[stroke.length - 1], next)) {
+                stroke.push(next);
+                showPreview();
             }
-            else {
-                // Return to the select mode if drawing is not in progress
-                this.context.setMode('select');
+            return true;
+        },
+        onDragEnd(event) {
+            if (!stroke)
+                return false;
+            const next = event.snapped.lngLat;
+            if (farEnough(stroke[stroke.length - 1], next))
+                stroke.push(next);
+            if (stroke.length >= 2) {
+                // The line is not selected, so that drawing can go on
+                ctx.commitFeature({
+                    type: 'Freehand',
+                    geometry: { type: 'LineString', coordinates: stroke },
+                    // The same default color as a line
+                    style: { strokeWidth: 3 },
+                });
             }
-        }
-    }
-    /**
-     * 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;
-    }
-}
+            dropStroke();
+            releasePan();
+            return true;
+        },
+        // The press ended without a release (a second finger, or the browser cancelled the touch)
+        onDragCancel() {
+            dropStroke();
+            releasePan();
+            return true;
+        },
+        onKeyDown(event) {
+            if (event.key !== 'Escape')
+                return false;
+            if (stroke)
+                dropStroke();
+            else
+                ctx.setMode('select');
+            return true;
+        },
+    };
+};

package/dist/modes/draw/image.js

@@ -36,9 +36,11 @@ export class DrawImageMode {
         store.transact(() => {
             store.setSelection(null, []);
         }, 'silent');
-        // Get the center coordinate and the zoom of the map
+        // The position of the click that led here (a listener of the click entered the mode), or
+        // else the center of the map
+        const clicked = this.context.getClickPosition?.() ?? null;
         const center = map.getCenter();
-        const coordinate = [center.lng, center.lat];
+        const coordinate = clicked ? [clicked[0], clicked[1]] : [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);

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

@@ -1,9 +1,9 @@
 /**
  * Draw Modes module
  */
-export { DrawCircleMode } from './circle.js';
-export { DrawFreehandMode } from './freehand.js';
+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';
+export { drawLineMode } from './line.js';
+export { drawPointMode } from './point.js';
+export { drawPolygonMode } from './polygon.js';

package/dist/modes/draw/index.js

@@ -3,9 +3,9 @@
 /**
  * Draw Modes module
  */
-export { DrawCircleMode } from './circle.js';
-export { DrawFreehandMode } from './freehand.js';
+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';
+export { drawLineMode } from './line.js';
+export { drawPointMode } from './point.js';
+export { drawPolygonMode } from './polygon.js';