@sakuzu/maplibre-gl-draw 1.0.0 → 2.1.0

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

@@ -4,17 +4,19 @@
  * Hit testing strategy for Point features.
  * Distances are measured in the local frame of hit testing (local-frame.ts).
  */
-import type { Coordinate, Feature, FeatureType } from '../../../store/types.js';
-import type { HitTestStrategy } from './base.js';
+import type { Feature, FeatureType } from '../../../api/model.js';
 /**
  * The built-in hit test of `Point` features: hit within the tolerance of the position.
  *
- * The distance is measured in the local frame of the click (see {@link HitTestStrategy}).
- * A custom type drawn as a point can reuse it, or extend it to widen the hit area.
+ * The distance is measured in a local frame around the click, where a degree of longitude is
+ * scaled by the cosine of the latitude. A feature type drawn as a point can reuse it, or
+ * extend it to widen the hit area. The engine uses it as the hit test of its points.
  */
-export declare class PointHitTestStrategy implements HitTestStrategy {
+export declare class PointHitTestStrategy {
     /** The feature type, `'Point'` */
     readonly geometryType: FeatureType;
-    test(feature: Feature, coordinate: Coordinate, toleranceLngLat: number): boolean;
-    distance(feature: Feature, coordinate: Coordinate): number;
+    /** Whether the feature is within `toleranceLngLat` degrees of the coordinate */
+    test(feature: Feature, coordinate: [number, number], toleranceLngLat: number): boolean;
+    /** The distance from the coordinate to the feature, in degrees of the local frame */
+    distance(feature: Feature, coordinate: [number, number]): number;
 }

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

@@ -1,11 +1,13 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
+import { coordinatesOf } from '../../../shared/utils/coordinates.js';
 import { latitudeScale, localDistance } from '../local-frame.js';
 /**
  * The built-in hit test of `Point` features: hit within the tolerance of the position.
  *
- * The distance is measured in the local frame of the click (see {@link HitTestStrategy}).
- * A custom type drawn as a point can reuse it, or extend it to widen the hit area.
+ * The distance is measured in a local frame around the click, where a degree of longitude is
+ * scaled by the cosine of the latitude. A feature type drawn as a point can reuse it, or
+ * extend it to widen the hit area. The engine uses it as the hit test of its points.
  */
 export class PointHitTestStrategy {
     constructor() {
@@ -17,13 +19,15 @@ export class PointHitTestStrategy {
             value: 'Point'
         });
     }
+    /** Whether the feature is within `toleranceLngLat` degrees of the coordinate */
     test(feature, coordinate, toleranceLngLat) {
-        const pointCoord = feature.coordinates;
+        const pointCoord = coordinatesOf(feature);
         const dist = localDistance(coordinate, pointCoord, latitudeScale(coordinate[1]));
         return dist <= toleranceLngLat;
     }
+    /** The distance from the coordinate to the feature, in degrees of the local frame */
     distance(feature, coordinate) {
-        const pointCoord = feature.coordinates;
+        const pointCoord = coordinatesOf(feature);
         return localDistance(coordinate, pointCoord, latitudeScale(coordinate[1]));
     }
 }

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

@@ -1,10 +1,3 @@
-/**
- * PolygonHitTestStrategy
- *
- * Hit testing strategy for Polygon features.
- * Distances to the edges are measured in the local frame of hit testing (local-frame.ts).
- * The inside test is unaffected by that frame (it only scales the latitude axis).
- */
 import type { Coordinate, Feature, FeatureType } from '../../../store/types.js';
 import type { HitTestStrategy } from './base.js';
 /**

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

@@ -1,5 +1,13 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * PolygonHitTestStrategy
+ *
+ * Hit testing strategy for Polygon features.
+ * Distances to the edges are measured in the local frame of hit testing (local-frame.ts).
+ * The inside test is unaffected by that frame (it only scales the latitude axis).
+ */
+import { coordinatesOf } from '../../../shared/utils/coordinates.js';
 import { latitudeScale, localPointToSegmentDistance } from '../local-frame.js';
 import { polylineDistanceWithin } from '../segment-grid.js';
 /**
@@ -15,15 +23,15 @@ export class PolygonHitTestStrategy {
         });
     }
     test(feature, coordinate, toleranceLngLat) {
-        const rings = feature.coordinates;
+        const rings = coordinatesOf(feature);
         return this.testRings(rings, coordinate, toleranceLngLat);
     }
     distance(feature, coordinate) {
-        const rings = feature.coordinates;
+        const rings = coordinatesOf(feature);
         return this.distanceToRings(rings, coordinate);
     }
     testDistance(feature, coordinate, toleranceLngLat) {
-        const rings = feature.coordinates;
+        const rings = coordinatesOf(feature);
         return this.testDistanceRings(rings, coordinate, toleranceLngLat);
     }
     /**

package/dist/dispatcher/hit-test/topmost.d.ts

@@ -1,4 +1,4 @@
-import type { Dataset } from '../../display/types.js';
+import type { Dataset } from '../../dataset/types.js';
 import type { ScreenPoint } from '../../shared/math/index.js';
 import type { Feature } from '../../store/types.js';
 import type { FeatureCompanionHitResult } from '../../view/feature-companion.js';

package/dist/dispatcher/input-router.js

@@ -39,7 +39,8 @@ function firstTentativeCoordinate(tentative) {
  *   little beyond ±180; the rendering and the export deal with that
  * - A drag moves every coordinate of its events by the one shift decided from where it started
  *   (`dragStartLngLat`), so the distance dragged never jumps by 360 degrees when the pointer
- *   crosses the antimeridian during the drag
+ *   crosses the antimeridian during the drag. The normalizer gives the positions of a press
+ *   continuously (the globe's jump from 180 to -180 included), so one shift keeps them so
  *
  * Away from the antimeridian, on the main copy of the world, nothing changes and the event is
  * returned as it is.
@@ -67,7 +68,7 @@ function toStoredCopy(event, reference) {
  * @internal
  */
 export function createInputRouter(deps) {
-    const { normalizer, modeManager, context, map, pluginManager, displayInteractions, notifyMapClick, snapService, } = deps;
+    const { normalizer, modeManager, context, map, displayInteractions, notifyMapClick, trackClick, snapService, extensionInput, } = deps;
     let boundHandleEvent = null;
     /**
      * Whether input originating from the pointer is currently held
@@ -126,68 +127,140 @@ export function createInputRouter(deps) {
      */
     function applySnap(event, inputType) {
         if (!snapService || event.snap === false)
-            return event;
-        if (modeManager.getHandler()?.isSnapEnabledFor?.(inputType) === false)
-            return event;
+            return { event, result: null };
+        if (modeManager.getHandler()?.isSnapEnabledFor?.(inputType) === false) {
+            return { event, result: null };
+        }
         const result = snapService.resolve(event.lngLat, event.point, buildSnapContext(event.modifiers));
         if (result.lngLat.lng === event.lngLat.lng && result.lngLat.lat === event.lngLat.lat) {
-            return event;
+            return { event, result: result.target ? result : null };
+        }
+        return {
+            event: { ...event, lngLat: { lng: result.lngLat.lng, lat: result.lngLat.lat } },
+            result,
+        };
+    }
+    /**
+     * What a consumed event stops besides the receivers after it: a consumed press does not
+     * reach the map (no pan starts) and a consumed double click does not zoom it
+     */
+    function stopConsumed(event) {
+        if (event.type === 'mousedown') {
+            const original = event.originalEvent;
+            original.stopPropagation();
+            if (!('touches' in original))
+                original.preventDefault();
+        }
+        else if (event.type === 'dblclick') {
+            event.originalEvent.preventDefault();
+        }
+    }
+    /**
+     * Hands the event to the plugins of the extensions, then to a mode written to the extension
+     * contract
+     *
+     * @returns 'consumed' when the event goes no further, 'mode' when a mode of the contract
+     *   received it, 'engine' when the mode is a mode of the engine the router calls
+     */
+    function toExtensions(handler, event, snapped, snap) {
+        if (!extensionInput)
+            return 'engine';
+        if (extensionInput.toPlugins(event, snapped, snap)) {
+            stopConsumed(event);
+            return 'consumed';
+        }
+        const consumed = extensionInput.toMode(handler, event, snapped, snap);
+        if (consumed === undefined)
+            return 'engine';
+        if (consumed) {
+            stopConsumed(event);
+            return 'consumed';
+        }
+        return 'mode';
+    }
+    /**
+     * A click: to the extensions, the mode, the datasets and the map.clicked notification
+     *
+     * @returns Whether a receiver took it
+     */
+    function handleClickEvent(handler, event) {
+        // Deliver to the mode with the snapped coordinates (if nothing snapped,
+        // the original event is used unchanged)
+        const { event: snapped, result } = applySnap(event, 'click');
+        const route = toExtensions(handler, event, snapped, result);
+        if (route === 'consumed')
+            return true;
+        if (route === 'engine')
+            handleClick(handler, snapped);
+        // Delivery to datasets happens only in select mode. A click
+        // in a drawing mode places a vertex, and delivering that same click as a
+        // click on the data as well would make the host application's "click to
+        // select" fire by mistake while drawing (for example, starting to draw a
+        // circle on top of a huge polygon of data would cover the whole screen with
+        // the selection highlight). The rule that a hit in the Store always wins is
+        // decided on the interception side, so the selection behavior of the mode
+        // during select is unaffected.
+        if (handler.modeName === 'select')
+            displayInteractions?.handleClick(snapped);
+        // Emit the click of select mode as a single stream regardless of whether
+        // anything was hit (draw.map.click). display.click is designed not to fire
+        // when a feature in the Store is hit, so a host application that needs "a
+        // click anywhere on the map" (placing a comment pin, for instance) watches
+        // this one. The coordinates are copied from the raw event before snapping.
+        if (handler.modeName === 'select') {
+            notifyMapClick?.({
+                lngLat: [event.lngLat.lng, event.lngLat.lat],
+                point: { x: event.point.x, y: event.point.y },
+            });
         }
-        return { ...event, lngLat: { lng: result.lngLat.lng, lat: result.lngLat.lat } };
+        return route === 'engine' && handler.onClick !== undefined;
     }
+    /**
+     * Hands an event to the extensions and the mode
+     *
+     * @returns Whether a receiver took it: a plugin or a mode of the contract consumed it, or
+     *   the mode of the engine has a receiver for it
+     */
     function handleEvent(input, options = {}) {
         // Only input originating from the real pointer is stopped while held.
         // Synthetic input (dispatch) is let through
         if (pointerHeld && !options.synthetic && HELD_EVENT_TYPES.has(input.type))
-            return;
+            return false;
         const handler = modeManager.getHandler();
         if (!handler)
-            return;
+            return false;
         // The single place where the longitude of the input is decided (see toStoredCopy)
         const event = toStoredCopy(input, firstTentativeCoordinate(context.store.getTentative()));
         switch (event.type) {
-            case 'click': {
-                // Deliver to the mode with the snapped coordinates (if nothing snapped,
-                // the original event is used unchanged)
-                const snapped = applySnap(event, 'click');
-                handleClick(handler, snapped);
-                // Delivery to datasets happens only in select mode. A click
-                // in a drawing mode places a vertex, and delivering that same click as a
-                // click on the data as well would make the host application's "click to
-                // select" fire by mistake while drawing (for example, starting to draw a
-                // circle on top of a huge polygon of data would cover the whole screen with
-                // the selection highlight). The rule that a hit in the Store always wins is
-                // decided on the interception side, so the selection behavior of the mode
-                // during select is unaffected.
-                if (handler.modeName === 'select')
-                    displayInteractions?.handleClick(snapped);
-                // Emit the click of select mode as a single stream regardless of whether
-                // anything was hit (draw.map.click). display.click is designed not to fire
-                // when a feature in the Store is hit, so a host application that needs "a
-                // click anywhere on the map" (placing a comment pin, for instance) watches
-                // this one. The coordinates are copied from the raw event before snapping.
-                if (handler.modeName === 'select') {
-                    notifyMapClick?.({
-                        lngLat: [event.lngLat.lng, event.lngLat.lat],
-                        point: { x: event.point.x, y: event.point.y },
-                    });
+            case 'click':
+                trackClick?.([event.lngLat.lng, event.lngLat.lat]);
+                try {
+                    return handleClickEvent(handler, event);
                 }
-                break;
+                finally {
+                    trackClick?.(null);
+                }
+            case 'dblclick': {
+                const taken = engineOr(toExtensions(handler, event, event, null), handler.onDoubleClick, () => handler.onDoubleClick?.(event));
+                // A double click never zooms the map while a drawing mode is active, whether or not
+                // anything took it: its clicks were meant for the drawing
+                if (handler.writesFeatures === true)
+                    event.originalEvent.preventDefault();
+                return taken;
             }
-            case 'dblclick':
-                handler.onDoubleClick?.(event);
-                break;
             case 'mousedown':
-                handleMouseDown(handler, event);
-                break;
+                return engineOr(toExtensions(handler, event, event, null), handler.onMouseDown, () => handleMouseDown(handler, event));
             case 'mouseup':
-                handler.onMouseUp?.(event);
-                break;
+                return engineOr(toExtensions(handler, event, event, null), handler.onMouseUp, () => handler.onMouseUp?.(event));
             case 'mousemove': {
-                const snapped = applySnap(event, 'mousemove');
-                // Call the onMouseMove of the plugins (they do not consume it)
-                pluginManager?.handleMouseMove(snapped);
-                handler.onMouseMove?.(snapped);
+                const { event: snapped, result } = applySnap(event, 'mousemove');
+                if (extensionInput?.toPlugins(event, snapped, result))
+                    return true;
+                const consumed = extensionInput?.toMode(handler, event, snapped, result);
+                if (consumed === true)
+                    return true;
+                if (consumed === undefined)
+                    handler.onMouseMove?.(snapped);
                 // The hover of datasets is likewise limited to select mode,
                 // by the same rule as click. When switching to a drawing mode, a hover that
                 // is still held is discarded (so that it does not fire on the stale target
@@ -198,53 +271,64 @@ export function createInputRouter(deps) {
                 else {
                     displayInteractions?.reset();
                 }
-                break;
+                return consumed === undefined && handler.onMouseMove !== undefined;
             }
             case 'contextmenu':
                 // contextmenu currently has no special handling
-                break;
+                return false;
             // The start and end of a drag also go through snapping. This is to keep
             // "start drawing exactly at a corner of a boundary and end at a corner" for
             // drag-driven drawing (freehand). The drag operations of select mode use
             // dragStartLngLat (the press position from before the threshold was exceeded)
             // as their start position, so they are unaffected by the replacement here.
             case 'dragstart': {
-                const snapped = applySnap(event, 'dragstart');
-                handler.onDragStart?.(snapped);
-                break;
+                const { event: snapped, result } = applySnap(event, 'dragstart');
+                return engineOr(toExtensions(handler, event, snapped, result), handler.onDragStart, () => handler.onDragStart?.(snapped));
             }
             case 'dragmove': {
-                const snapped = applySnap(event, 'dragmove');
-                // Call the onDragMove of the plugins (they do not consume it; the
-                // counterpart of onMouseMove)
-                pluginManager?.handleDragMove(snapped);
+                const { event: snapped, result } = applySnap(event, 'dragmove');
+                if (extensionInput?.toPlugins(event, snapped, result))
+                    return true;
+                const consumed = extensionInput?.toMode(handler, event, snapped, result);
+                if (consumed !== undefined)
+                    return consumed;
                 handler.onDragMove?.(snapped);
-                break;
+                return handler.onDragMove !== undefined;
             }
             case 'dragend': {
-                const snapped = applySnap(event, 'dragend');
-                handler.onDragEnd?.(snapped);
-                break;
+                const { event: snapped, result } = applySnap(event, 'dragend');
+                return engineOr(toExtensions(handler, event, snapped, result), handler.onDragEnd, () => handler.onDragEnd?.(snapped));
             }
             // A press ended without a release (a second finger, or the browser cancelled the
             // touch). No coordinates are decided, so it does not go through snapping, and it
             // is never held: the mode must always get the chance to abort the press.
             case 'dragcancel':
-                handler.onDragCancel?.(event);
-                break;
-            case 'keydown':
-                // Call the onKeyDown of the plugins first
-                if (pluginManager?.handleKeyDown(event)) {
-                    // Handled by a plugin
-                    break;
-                }
+                return engineOr(toExtensions(handler, event, event, null), handler.onDragCancel, () => handler.onDragCancel?.(event));
+            case 'keydown': {
+                if (extensionInput?.toPlugins(event, event, null))
+                    return true;
+                const consumed = extensionInput?.toMode(handler, event, event, null);
+                if (consumed !== undefined)
+                    return consumed;
                 handler.onKeyDown?.(event);
-                break;
+                return handler.onKeyDown !== undefined;
+            }
             case 'keyup':
-                handler.onKeyUp?.(event);
-                break;
+                return engineOr(toExtensions(handler, event, event, null), handler.onKeyUp, () => handler.onKeyUp?.(event));
         }
     }
+    /**
+     * Runs the receiver of the mode of the engine when the route leads to it
+     *
+     * @param receiver - The receiver of the mode of the engine, to tell whether it has one
+     * @returns Whether a receiver took the event
+     */
+    function engineOr(route, receiver, run) {
+        if (route !== 'engine')
+            return route === 'consumed';
+        run();
+        return receiver !== undefined;
+    }
     function handleClick(handler, event) {
         handler.onClick?.(event);
     }

package/dist/dispatcher/normalizer.js

@@ -1,5 +1,6 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
+import { nearestLongitude } from '../shared/math/longitude.js';
 import { getModifiers } from './types.js';
 const DEFAULT_OPTIONS = {
     dragThreshold: 3,
@@ -51,6 +52,20 @@ function createProfiles(opts) {
         },
     };
 }
+/**
+ * The position of the pointer, on the copy of the world nearest to where it was last
+ *
+ * The flat map gives the pointer unwrapped longitudes, which run on past 180 as it crosses the
+ * antimeridian. The globe gives them in [-180, 180], so they jump by 360 degrees there: a
+ * freehand stroke drawn from them went once round the world along the parallel, and the shift
+ * of a feature dragged across jumped by a turn. Within a press each position is therefore
+ * taken on the copy nearest to the last one, so the pointer moves on continuously, as on the
+ * flat map. A position within 180 degrees of the last one is returned unchanged.
+ */
+function continuing(lngLat, last) {
+    const lng = nearestLongitude(lngLat.lng, last.lng);
+    return lng === lngLat.lng ? lngLat : { lng, lat: lngLat.lat };
+}
 /**
  * Whether a mouse event is the compatibility event a browser emits for a touch
  */
@@ -77,7 +92,7 @@ export function createInputNormalizer(map, options = {}) {
     const canvas = map.getCanvas();
     const listeners = new Set();
     const opts = { ...DEFAULT_OPTIONS, ...options };
-    const profiles = createProfiles(opts);
+    let profiles = createProfiles(opts);
     // State management
     let press = null;
     /**
@@ -184,7 +199,8 @@ export function createInputNormalizer(map, options = {}) {
      *
      * Once the press has become a drag it stays one until it is released.
      */
-    function movePress(current, point, lngLat, originalEvent) {
+    function movePress(current, point, rawLngLat, originalEvent) {
+        const lngLat = continuing(rawLngLat, current.lastLngLat);
         current.lastPoint = point;
         current.lastLngLat = lngLat;
         current.lastEvent = originalEvent;
@@ -204,7 +220,8 @@ export function createInputNormalizer(map, options = {}) {
      * Releases the press: dragend (when dragging) and mouseup. Returns whether the release
      * is a click candidate.
      */
-    function releasePress(current, point, lngLat, originalEvent) {
+    function releasePress(current, point, rawLngLat, originalEvent) {
+        const lngLat = continuing(rawLngLat, current.lastLngLat);
         clearLongPress(current);
         press = null;
         if (current.dragging) {
@@ -509,5 +526,9 @@ export function createInputNormalizer(map, options = {}) {
     function off(handler) {
         listeners.delete(handler);
     }
-    return { attach, detach, on, off };
+    const setDragThreshold = (px) => {
+        opts.dragThreshold = px;
+        profiles = createProfiles(opts);
+    };
+    return { attach, detach, on, off, setDragThreshold };
 }

package/dist/dispatcher/types.d.ts

@@ -22,7 +22,7 @@ export interface ModifierKeys {
  * `'touch'` is one finger of a touch screen, `'pen'` a stylus (reported either through
  * the touch events, as on iPadOS, or through the mouse events the browser emits for
  * it), and `'mouse'` everything else. Input with no `pointerType` (synthetic input
- * through `draw.input`, for example) is treated as `'mouse'`.
+ * of the tests, for example) is treated as `'mouse'`.
  */
 export type PointerType = 'mouse' | 'touch' | 'pen';
 /**
@@ -68,6 +68,11 @@ export interface MouseNormalizedEvent {
      * which synthetic input chooses whether to go through snapping.
      */
     snap?: boolean;
+    /**
+     * Whether the event was made from code (`draw.drawing`) at an exact position, not by the
+     * pointer; the modes apply no click tolerance to it (`DrawPointerEvent.programmatic`)
+     */
+    programmatic?: boolean;
 }
 /**
  * A normalized drag event: the start, each move, the end or the cancellation of a press