@sakuzu/maplibre-gl-draw 1.0.0 → 2.1.0

package/dist/index.d.ts

@@ -1,72 +1,72 @@
 /**
- * MapLibre GL Draw - public entry point
+ * Draw and edit points, lines and areas on a MapLibre map, and show large data beside them.
  *
- * The caller accesses the whole public API through the single entry
- * `import { ... } from '@sakuzu/maplibre-gl-draw'` (plus the pure geometry functions of
- * `@sakuzu/maplibre-gl-draw/geometry`). Tree-shaking is applied by the ESM bundler, which
- * looks at `"sideEffects": false` in package.json.
+ * Import from here for everything an application does with a drawing: create the instance,
+ * read and change its features, layers and groups, listen to what changes, save and load the
+ * document, and add plugins, modes and feature types. Three subpaths cover the rest: geometry
+ * that needs no map (`/geometry`), large tables read in a Worker (`/table`) and custom shaders
+ * (`/webgl`).
  *
- * Every public symbol is listed here by name, in one of two layers (see "The public
- * surface" in CONTRIBUTING.md and "The two layers of the public API" in
- * docs/reference/README.md):
+ * ```ts
+ * import { createDraw } from '@sakuzu/maplibre-gl-draw';
  *
- *   - Layer 1, the public API: the factory, the instance and its options, the data model,
- *     the events, the extension points and the pure functions. It follows semver.
- *   - Layer 2, building blocks for extension authors: the rendering parts, the math and the
- *     core services that a plugin, a custom feature type or a custom mode may reuse. Its
- *     guarantee is weaker: it may change in a minor release.
+ * const draw = createDraw(map);
+ * draw.setMode('draw_polygon');
+ * draw.on('feature.created', ({ feature }) => {
+ *   console.log(feature.id, feature.geometry);
+ * });
+ * ```
  *
- * Anything not listed here is internal. Where it would otherwise appear in the emitted
- * declarations, its JSDoc carries the internal tag and `stripInternal` drops it from them.
- * The list is pinned by src/index.test.ts, so every addition or removal is deliberate.
+ * Where to find things: every resource of {@link Draw} is a field with its own methods.
+ *
+ * - `draw.features` (create, update, delete, move, union, split): {@link FeaturesCollection}
+ * - `draw.layers` (create, update, reorder, setActive): {@link LayersCollection}
+ * - `draw.groups` (create, update, move): {@link GroupsCollection}
+ * - `draw.datasets` (add, remove, move): {@link DatasetsCollection}
+ * - `draw.selection` (set, add, clear, delete, group): {@link SelectionResource}
+ * - `draw.vertexSelection` (set, clear, delete): {@link VertexSelectionResource}
+ * - `draw.metadata` and `draw.options` (get, update): {@link MetadataResource}, {@link OptionsResource}
+ * - `draw.document` (load, toJSON, toGeoJSON): {@link DocumentResource}
+ * - `draw.drawing` (addVertex, finish, cancel): {@link DrawingResource}
+ * - `draw.extensions` (plugins, modes, feature types): {@link ExtensionsCollections}
+ * - events with `draw.on`: {@link DrawEvents}; errors: {@link DrawError}
+ *
+ * Read next: [getting started](https://sakuzu.github.io/maplibre-gl-draw/getting-started),
+ * then the guides for [drawing](https://sakuzu.github.io/maplibre-gl-draw/guides/drawing) and
+ * [saving and loading](https://sakuzu.github.io/maplibre-gl-draw/guides/save-load). The
+ * symbols used most are {@link createDraw}, {@link Draw}, {@link Feature} and
+ * {@link DrawEvents}.
+ *
+ * @module maplibre-gl-draw
  */
-export type { EventPayloads, MapLibreGLDraw, Options } from './api/index.js';
-export { createMapLibreGLDraw } from './maplibre-gl-draw.js';
-export type { BoundingBoxStyle, BoxSelectionStyleConfig, CenterMarkerStyle, FeatureStyleConfig, FillStyle, LineStringFeatureStyle, MidpointHandleStyle, PointFeatureStyle, PolygonFeatureStyle, RadiusHandleStyle, RadiusLineStyle, RenderingConfig, ResizeHandleStyle, RotateHandleStyle, SelectionUIConfig, TentativeStyle, TopologyConfig, TraceOptions, VertexHandleStyle, } from './shared/config/index.js';
-export type { AutoNameConfig, AutoNameType, PixelRatioInput, PixelRatioProvider, } from './shared/utils/index.js';
-export type { SnapDisableKey, SnapOptions, SnapTargetKind } from './snapping/index.js';
-export type { Color, LineStyle, PointShape, PointStyle, StrokeStyle } from './view/index.js';
-export { MESSAGES_EN, type Messages } from './messages.js';
-export type { BoundingBox, BoundingBoxCoordsSimple, BoxSelection, Coordinate, Data, DragOperationType, DragState, ExportFormat, ExportOptions, ExportResult, Feature, FeatureCoordinates, FeatureInput, FeatureStyle, FeatureType, FileData, Group, ImageProperties, ImageStyle, Layer, LoadOptions, LoadResult, Metadata, Mode, RotateInfo, Selection, SelectionType, SkippedFeature, StateChanges, StyleRule, TentativeState, UpdateFeatureOptions, UpdateSource, VertexRef, VertexSelection, } from './store/index.js';
-export type { LegendEntry } from './view/index.js';
-export type { DocumentStore, FeatureLockStore, InteractionGateStore, Store, StoreView, UiState, } from './store/index.js';
-export { isFeatureLocked, isGroupLocked, isInteractionBlocked, MemoryStore, } from './store/index.js';
-export type { MapClickEventPayload } from './dispatcher/index.js';
-export type { DatasetClickEventPayload } from './display/index.js';
-export type { EventListener, EventMap, FeaturesChangePayload, GeometryAppliedPayload, GeometryOperationName, LoadErrorPayload, } from './shared/utils/index.js';
-export type { GeometryBufferOptions, GeometryOperations, InputOperations, SnappingOperations, SyntheticInputOptions, SyntheticKeyOptions, SyntheticLngLat, SyntheticModifiers, TopologyOperations, TracingOperations, } from './api/index.js';
-export type { DatasetBaseStyle, DatasetChangePayload, DatasetClickPayload, Dataset, DatasetEventMap, DatasetOptions, DatasetOrder, DatasetPlacement, DatasetCollisionThinning, DatasetColumn, DatasetColumnarGeometry, DatasetColumnarGeometryType, DatasetColumnarInput, DatasetColumnarMixedGeometry, DatasetColumnarPrepared, DatasetDictionaryCodes, DatasetDictionaryColumn, DatasetFeatureInput, DatasetFeatureProvider, DatasetHoverPayload, DatasetThinningStats, DatasetZoomScale, ResolvedCollisionThinning, } from './display/index.js';
-export type { GuideSnapProviderDeps, GuideSnapProviderOptions, ResolvedSnapOptions, SnapCandidate, SnapContext, SnapExcludeVertex, SnapIndicatorStyles, SnapLngLat, SnapPointCandidate, SnapProvider, SnapProviderContext, SnapResult, SnapSegmentCandidate, SnapTarget, SnapTargetSegment, } from './snapping/index.js';
-export { createGuideSnapProvider, DEFAULT_SNAP_GUIDE_LINE_STYLE, DEFAULT_SNAP_INDICATOR_STYLES, } from './snapping/index.js';
-export type { TraceGraph, TraceGraphEdge, TraceGraphEndpoint, TraceGraphNode, } from './operations/index.js';
-export { buildTraceGraph, findTracePath } from './operations/index.js';
-export type { StyleRuleChannel } from './view/index.js';
-export { applyRuleColor, deriveLegend, evaluateStyleRule, getStyleRuleChannel, resolveFeatureStyle, resolveRuleColor, } from './view/index.js';
-export { getCreatedZoom, getRotation, getScale, setCreatedZoom, setRotation, } from './shared/utils/index.js';
-export type { CustomFeatureHandler, CustomFeatureRenderer, CustomOverlayRenderer, CustomRendererDrawContext, CustomResizeResult, LayerAwareOverlayRenderer, } from './extension/index.js';
-export type { BoxSelectionStrategy, DragNormalizedEvent, HitTestOptions, HitTestResult, HitTestStrategy, KeyNormalizedEvent, ModifierKeys, MouseNormalizedEvent, NormalizedEvent, PointerOriginalEvent, PointerType, VertexHit, } from './dispatcher/index.js';
-export type { ModeContext, ModeFactory, ModeHandler, SnapInputType } from './modes/index.js';
-export type { ResizeState } from './operations/index.js';
-export type { DragEndData, DragStartData, Hooks, HoverEvent, MouseLeaveEvent, MutationContext, Plugin, PluginContext, } from './plugins/index.js';
-export type { HandleType } from './shared/config/index.js';
-export type { LngLat, ScreenPoint } from './shared/math/index.js';
-export type { AdditionalHandleInfo, AdditionalResizeHandlesCalculator, AuxiliaryHandle, AuxiliaryHandleContext, AuxiliaryHandleHit, AuxiliaryHandleProvider, BoundingBoxCoords, CompanionHit, CompanionHitContext, CustomBoundingBoxCalculator, CustomResizeCalculator, FeatureCompanionProvider, HandleInfo, PointFrameExtent, PointFrameExtentProvider, RenderSlot, ResizeStrategy, } from './view/index.js';
-export type { BoxSelectionStrategyRegistry, HitTestService, HitTestTopmost, TopHit, TopmostHitTestOptions, UnprojectFunction, } from './dispatcher/index.js';
-export type { HookName, PluginManager } from './plugins/index.js';
-export type { TraceConfig } from './shared/config/index.js';
-export type { AutoNameGenerator, EventEmitter } from './shared/utils/index.js';
-export type { SpatialQuery } from './store/index.js';
-export type { AuxiliaryHandleRegistry, FeatureCompanionHitResult, FeatureCompanionRegistry, FillShaderManager, PointShapeRenderer, SDFLineRenderer, SDFStrokeOptions, SDFStrokeStyle, SelectionExtensionRegistry, SelectionScope, TerrainContext, TerrainRenderState, WidthUnit, } from './view/index.js';
-export type { TerrainDiagnostics, TerrainRenderDiagnostics } from './api/index.js';
-export type { TerrainDrapeDebug } from './view/index.js';
-export { resolvePixelRatio } from './shared/utils/index.js';
-export type { BlendCapableGL, DashSegment, DrapeQuadCorners, OffsetUniforms, ProjectionUniformLocations, QuadDrapeColor, QuadDrapeFill, QuadDrapeSurface, QuadDrapeGlyphs, QuadVertices, ShaderData, } from './view/index.js';
-export { applyDrawBlendState, calculateLngLatOffset, calculateOffsetUniforms, computeQuadVertices, createProgram, drawBillboardsWithoutDepth, drawQuadSurfaceOnTerrain, getProjectionTransitionUniform, getStrokeDashPattern, OFFSET_MODE_GLSL, ProjectionUniformManager, QUAD_GLYPH_STRIDE, QuadShader, splitIntoDashes, } from './view/index.js';
-export type { MercatorRect, TessellationStep, TessellationTiling } from './view/index.js';
-export { anchorElevationMeters, anchorGhostOpacity, densifyPath, getAnchorElevationGeneration, getTerrainTessellationStep, metersToMercatorScale, } from './view/index.js';
-export type { MercatorCoord, OBB, OBBCorners } from './shared/math/index.js';
-export { createOBB, DEFAULT_TILE_SIZE, distanceToOBB, generateCirclePolygon, getOBBAABB, lngLatToMercator, metersToDegreesLat, metersToDegreesLng, pixelsToDegreesLat, pixelsToDegreesLng, rectangleIntersectsOBB, } from './shared/math/index.js';
-export { getContrastColor } from './shared/utils/index.js';
-export { PointHitTestStrategy } from './dispatcher/index.js';
-export { createGeometryApi, type GeometryApi, type GeometryApiDeps } from './api/index.js';
-export { computeBoundingBox, createFeatureCompanionRegistry, createSelectionExtensionRegistry, DEFAULT_POINT_FRAME_SIZE, DEFAULT_VIEWPORT_EXPANSION_FACTOR, getExpandedViewportBounds, getSelectedFeatureIds, hasZeroArea, } from './view/index.js';
+export type { Draw, TransactOptions } from './api/draw.js';
+export { createDraw } from './api/draw.js';
+export type { AutoNameOptions, DrawOptions, OptionsResource, RenderingOptions, RuntimeOptions, SelectionStyleOptions, SnappingOptions, TopologyOptions, TracingOptions, } from './api/options.js';
+export type { Messages } from './messages.js';
+export type { FeaturesCollection } from './api/features.js';
+export type { LayersCollection } from './api/layers.js';
+export type { GroupsCollection } from './api/groups.js';
+export type { HiddenCollection } from './api/hidden.js';
+export type { SelectionResource, VertexSelectionResource } from './api/selection.js';
+export type { MetadataResource } from './api/metadata.js';
+export type { DrawingResource } from './api/drawing.js';
+export type { DocumentResource } from './api/document.js';
+export type { DrawDocument, DrawProperties, Feature, FeatureStyle, FeatureStyleResolved, FeatureType, FileData, Group, Layer, LegendEntry, LineStyle, Metadata, PointShape, StyleRule, } from './api/model.js';
+export { DRAW_PROPERTY_PREFIX, isDrawProperty } from './api/model.js';
+export type { FeatureFilter, FeatureInput, FeaturePatch, GroupFilter, GroupInput, GroupPatch, LayerFilter, LayerInput, LayerPatch, LoadOptions, LoadResult, LoadSource, MoveTarget, SkippedFeature, } from './api/model.js';
+export type { LayerStackEntry, Mode, Selection, SelectionType, SnapPreference, SnapResult, TerrainDiagnostics, VertexRef, VertexSelection, } from './api/state.js';
+export { MODES } from './api/state.js';
+export type { DocumentChange, DrawEventListener, DrawEvents, ScreenPoint } from './api/events.js';
+export type { Position } from 'geojson';
+export type { DrawErrorCode } from './api/errors.js';
+export { DrawError } from './api/errors.js';
+export type { Dataset, DatasetBaseStyle, DatasetCollisionThinning, DatasetEvents, DatasetOptions, DatasetOrder, DatasetPlacement, DatasetProvider, DatasetRow, DatasetsCollection, DatasetThinningStats, DatasetZoomScale, } from './api/datasets.js';
+export type { Store, StoreView, UpdateSource } from './api/extension/store.js';
+export type { ExtensionContext, HitTestContext, ModeContext, NameGenerator, PluginContext, ScreenContext, SnapContext, TerrainAnchors, } from './api/extension/context.js';
+export type { FeatureTypeDefinition, Handle } from './api/extension/feature-type.js';
+export type { DrawKeyEvent, DrawPointerEvent, InputHandlers, ModeFactory, ModeHandler, Modifiers, } from './api/extension/mode.js';
+export type { Plugin } from './api/extension/plugin.js';
+export type { CompanionProvider, HandleProvider, Hit, SnapCandidate, SnapProvider, } from './api/extension/provider.js';
+export type { FeatureRenderer, FillRenderer, LineRenderer, OffsetUniforms, OverlayRenderer, PointRenderer, RenderContext, ShaderData, } from './api/extension/render.js';
+export type { ExtensionsCollections, FeatureTypesCollection, ModesCollection, OverlaysCollection, PluginsCollection, ProvidersCollection, } from './api/extensions.js';
+export { deriveLegend, evaluateStyleRule, getStyleRuleChannel } from './api/model.js';

package/dist/index.js

@@ -1,20 +1,8 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
-export { createMapLibreGLDraw } from './maplibre-gl-draw.js';
-export { MESSAGES_EN } from './messages.js';
-export { isFeatureLocked, isGroupLocked, isInteractionBlocked, MemoryStore, } from './store/index.js';
-export { createGuideSnapProvider, DEFAULT_SNAP_GUIDE_LINE_STYLE, DEFAULT_SNAP_INDICATOR_STYLES, } from './snapping/index.js';
-export { buildTraceGraph, findTracePath } from './operations/index.js';
-export { applyRuleColor, deriveLegend, evaluateStyleRule, getStyleRuleChannel, resolveFeatureStyle, resolveRuleColor, } from './view/index.js';
-// Property accessors
-export { getCreatedZoom, getRotation, getScale, setCreatedZoom, setRotation, } from './shared/utils/index.js';
-// WebGL building blocks
-export { resolvePixelRatio } from './shared/utils/index.js';
-export { applyDrawBlendState, calculateLngLatOffset, calculateOffsetUniforms, computeQuadVertices, createProgram, drawBillboardsWithoutDepth, drawQuadSurfaceOnTerrain, getProjectionTransitionUniform, getStrokeDashPattern, OFFSET_MODE_GLSL, ProjectionUniformManager, QUAD_GLYPH_STRIDE, QuadShader, splitIntoDashes, } from './view/index.js';
-export { anchorElevationMeters, anchorGhostOpacity, densifyPath, getAnchorElevationGeneration, getTerrainTessellationStep, metersToMercatorScale, } from './view/index.js';
-export { createOBB, DEFAULT_TILE_SIZE, distanceToOBB, generateCirclePolygon, getOBBAABB, lngLatToMercator, metersToDegreesLat, metersToDegreesLng, pixelsToDegreesLat, pixelsToDegreesLng, rectangleIntersectsOBB, } from './shared/math/index.js';
-export { getContrastColor } from './shared/utils/index.js';
-// Selection UI, hit testing and viewport helpers
-export { PointHitTestStrategy } from './dispatcher/index.js';
-export { createGeometryApi } from './api/index.js';
-export { computeBoundingBox, createFeatureCompanionRegistry, createSelectionExtensionRegistry, DEFAULT_POINT_FRAME_SIZE, DEFAULT_VIEWPORT_EXPANSION_FACTOR, getExpandedViewportBounds, getSelectedFeatureIds, hasZeroArea, } from './view/index.js';
+export { createDraw } from './api/draw.js';
+export { DRAW_PROPERTY_PREFIX, isDrawProperty } from './api/model.js';
+export { MODES } from './api/state.js';
+export { DrawError } from './api/errors.js';
+// Style rule functions
+export { deriveLegend, evaluateStyleRule, getStyleRuleChannel } from './api/model.js';

package/dist/messages.d.ts

@@ -9,12 +9,12 @@
  * - The keys are typed. A value is either a string or a function that formats one (it
  *   receives numbers already turned into strings)
  * - `MESSAGES_EN` is the default, in English. The library ships no other language
- * - `Options.messages` overrides part of the table for one instance. The table belongs to
+ * - `DrawOptions.messages` overrides part of the table for one instance. The table belongs to
  *   the instance and is never module-level state
  * - There is no locale detection and no automatic switching: the host passes the table
  *   it wants
  * - The words of the names generated for features, layers and groups are not in this table:
- *   they come from the naming configuration (`AutoNameConfig`, the `autoName` option)
+ *   they come from the `autoName` option
  */
 /**
  * The table of the strings the library returns as values: legend labels and the descriptions
@@ -22,14 +22,14 @@
  *
  * The library builds no such string inline; it reads it from the table of the instance, so
  * the host can show them in its own language. Pass the entries to replace as the `messages`
- * option of `createMapLibreGLDraw`; the entries left out keep {@link MESSAGES_EN}. A value is
- * a string, or a function that formats one from numbers already turned into strings. There is
- * no locale detection and no other built-in language. The words of generated names ("Layer 1")
- * are translated through the `autoName` option (`AutoNameConfig`), not here.
+ * option of `createDraw`; the entries left out keep the English defaults. A value is a string,
+ * or a function that formats one from numbers already turned into strings. There is no locale
+ * detection and no other built-in language. The words of generated names ("Layer 1") are
+ * translated through the `autoName` option, not here.
  *
  * @example
  * ```ts
- * const draw = createMapLibreGLDraw(map, {
+ * const draw = createDraw(map, {
  *   messages: {
  *     legendOther: 'Sonstige',
  *     legendRange: (lower, upper) => `${lower} bis unter ${upper}`,

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() } : {};
-}