@sakuzu/maplibre-gl-draw 1.0.0 → 2.0.0

package/dist/modes/draw/circle.js

@@ -1,222 +1,98 @@
 // 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';
+import { haversineDistanceMeters, initialBearingDegrees } from '../../geometry/distance.js';
+import { drawProperties } from '../../shared/properties.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
+ * The factory of the circle drawing mode
  *
  * @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)
+export const drawCircleMode = (ctx) => {
+    /** The center, once the first click set it */
+    let center = null;
+    let radiusMeters = 0;
+    let radiusHandleAngle = DEFAULT_RADIUS_HANDLE_ANGLE;
+    /** The values of the circle as it stands */
+    const circleProperties = () => drawProperties({ radiusMeters, radiusHandleAngle });
+    const reset = () => {
+        center = null;
+        radiusMeters = 0;
+        radiusHandleAngle = DEFAULT_RADIUS_HANDLE_ANGLE;
+        ctx.preview.clear();
+    };
+    const showPreview = () => {
+        if (!center)
             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,
+        ctx.preview.set({
             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]);
+            geometry: { type: 'Point', coordinates: center },
+            properties: circleProperties(),
         });
-        // 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);
+    };
+    const finish = () => {
+        if (!center || radiusMeters < MIN_RADIUS_METERS)
             return;
-        }
-        this.context.store.setTentative({
-            type: 'Circle',
-            coordinates: this.center,
-            layerId: this.context.getCurrentLayerId(),
-            radiusMeters: this.radiusMeters,
-            radiusHandleAngle: this.radiusHandleAngle,
-            pendingFeatureId: this.pendingFeatureId ?? undefined,
+        const at = center;
+        ctx.draw.transact(() => {
+            const feature = ctx.commitFeature({
+                type: 'Circle',
+                geometry: { type: 'Point', coordinates: at },
+                properties: circleProperties(),
+            });
+            if (feature)
+                ctx.draw.selection.set('feature', [feature.id]);
         });
-    }
-    /**
-     * Resets the state
-     */
-    reset() {
-        this.center = null;
-        this.radiusMeters = 0;
-        this.radiusHandleAngle = DEFAULT_RADIUS_HANDLE_ANGLE;
-        this.phase = 'waiting';
-        this.pendingFeatureId = null;
-    }
-}
+        reset();
+        ctx.setMode('select');
+    };
+    return {
+        writes: true,
+        onEnter() {
+            ctx.cursor.set('crosshair');
+            ctx.draw.transact(() => ctx.draw.selection.clear(), { source: 'silent' });
+            reset();
+        },
+        onExit() {
+            ctx.cursor.reset();
+            reset();
+        },
+        // What was being drawn is dropped when the state is reset from outside
+        onCancel: reset,
+        // A double click while drawing is two clicks of the drawing; it never zooms the map
+        onDoubleClick: () => true,
+        onClick(event) {
+            if (!center) {
+                center = event.snapped.lngLat;
+                radiusMeters = 0;
+                showPreview();
+            }
+            else if (radiusMeters >= MIN_RADIUS_METERS) {
+                finish();
+            }
+            return true;
+        },
+        onPointerMove(event) {
+            if (!center)
+                return false;
+            const from = [center[0], center[1]];
+            const to = [event.snapped.lngLat[0], event.snapped.lngLat[1]];
+            radiusMeters = haversineDistanceMeters(from, to);
+            radiusHandleAngle = initialBearingDegrees(from, to);
+            showPreview();
+            return false;
+        },
+        onKeyDown(event) {
+            if (event.key !== 'Escape')
+                return false;
+            if (center)
+                reset();
+            else
+                ctx.setMode('select');
+            return true;
+        },
+    };
+};

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

@@ -1,26 +1,15 @@
 /**
- * What a drawing mode writes when it commits: the layer, and the created zoom
+ * The layer a drawing mode of the engine commits into
  */
-import type { ModeContext } from '../handler.js';
+import type { EngineModeContext } 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,
+ * Applies the commit rule of `EngineModeContext.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.
+ * same rule through the EngineModeContext.
  */
-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;
-};
+export declare function resolveCommitLayer(context: EngineModeContext): string | null;

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

@@ -3,12 +3,12 @@
 /**
  * Resolves the layer a drawing mode commits a new feature into
  *
- * Applies the commit rule of `ModeContext.getCurrentLayerId`: it returns the writable layer,
+ * Applies the commit rule of `EngineModeContext.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.
+ * same rule through the EngineModeContext.
  */
 export function resolveCommitLayer(context) {
     const layerId = context.getCurrentLayerId();
@@ -18,14 +18,3 @@ export function resolveCommitLayer(context) {
     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() } : {};
-}