@sakuzu/maplibre-gl-draw 2.1.2 → 2.1.4

package/CHANGELOG.md

@@ -6,6 +6,60 @@ the project follows semantic versioning.
 
 ## [Unreleased]
 
+## [2.1.4] - 2026-10-07
+
+Two fixes to how sizes follow the zoom: the paths of a dataset that drew
+at a fixed size, and sizes below one pixel that never disappeared.
+
+### Fixed in 2.1.4
+
+- A dataset applies the draw factors of its `zoomScale` (size and
+  opacity) on every path it draws through. The selection highlight and
+  the selected feature drawn on top of it, dashed and dotted lines and
+  polygon outlines, and shapes that go through immediate mode used to be
+  drawn at their stored size, so a selected point or a dashed line did
+  not change with the zoom. The dash pattern is now made from the scaled
+  width. `BatchManager.beginFrame` and `DisplayBatchTarget.beginFrame`
+  take an optional `factors` that is combined with the layer factors
+  ([#28](https://github.com/sakuzu/maplibre-gl-draw/issues/28)).
+- Sizes below one pixel are drawn so that the ink on screen follows the
+  real size and fades out smoothly. A point whose diameter is below
+  1 px is drawn at 1 px with its alpha multiplied by the ratio of the
+  areas, and a line or a polygon outline thinner than 1 px is drawn at
+  1 px with its alpha multiplied by the width, on the flat map and on
+  the terrain drape alike. Before, a shrinking point kept a faint blob
+  of about the antialiasing width until its size was exactly 0. This
+  applies to datasets and hand-drawn features. Nothing changes at 1 px
+  and above, and no minimum or maximum size is added
+  ([#28](https://github.com/sakuzu/maplibre-gl-draw/issues/28)).
+
+## [2.1.3] - 2026-10-04
+
+Two fixes: the snap indicator that stayed after its input, and the
+selection frame of a point on the globe and on the terrain at a high
+pitch.
+
+### Fixed in 2.1.3
+
+- The snap indicator stayed after the input that made it: after leaving
+  the drawing mode, turning snapping off, Escape, or a pan, it went on
+  showing the last result, and `snap.changed` did not report the end of
+  the snap. The engine now clears the snap result when the mode changes,
+  when snapping (or a kind of it) is turned off, when a mode declines to
+  snap an input, and on cancel, and `snap.changed` reports `null` once
+  ([#22](https://github.com/sakuzu/maplibre-gl-draw/issues/22)).
+- The select mode snapped every input, so hovering near a vertex drew
+  the indicator, against the guide ("only while drawing and while moving
+  a vertex"). It now snaps its drags only. A select-mode plugin that
+  read `event.snapped` on a hover or a click receives the raw position
+  ([#22](https://github.com/sakuzu/maplibre-gl-draw/issues/22)).
+- The selection frame of a point is drawn as a figure of the screen,
+  like the mark: it keeps the size of the mark and the margin on the
+  terrain at any pitch and at the edge of the globe, and a point on the
+  far side of the globe gets no frame. The frame of a selection of
+  several features is drawn on the box of its handles
+  ([#12](https://github.com/sakuzu/maplibre-gl-draw/issues/12)).
+
 ## [2.1.2] - 2026-10-02
 
 Three fixes: a plugin's fill, the click that finishes a plugin's
@@ -1192,6 +1246,7 @@ available from Kasika, Inc.
 - Plugins, custom modes and custom feature types.
 
 [Unreleased]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.2...HEAD
+[2.1.3]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.2...v2.1.3
 [2.1.2]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.1...v2.1.2
 [2.1.1]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.0...v2.1.1
 [2.1.0]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.0.0...v2.1.0

package/dist/api/impl/engine.js

@@ -196,6 +196,12 @@ export function createEngine(map, options = {}, build = {}) {
     const repaintOnSnapChange = () => map.triggerRepaint();
     eventEmitter.on('snap.change', repaintOnSnapChange);
     teardown.add(() => eventEmitter.off('snap.change', repaintOnSnapChange));
+    // A snap belongs to the input of the mode that made it: leaving the mode clears it (any
+    // mode, built-in or added), so neither the indicator nor snap.changed keeps a stale target
+    teardown.add(store.subscribe((changes) => {
+        if (changes.mode)
+            snapService.clear();
+    }));
     // 4. Create the RenderCoordinator (triggers a repaint automatically when the
     // Store changes)
     const renderCoordinator = createRenderCoordinator({ map, store });

package/dist/api/impl/extension-host.js

@@ -83,7 +83,9 @@ export function createExtensionHost(deps) {
             install: (name, factory) => modeManager.registerMode(name, () => {
                 const handle = createModeContext(modeServices, screen);
                 try {
-                    return bridgeMode(name, factory(handle.context), handle.dispose, handle.entering);
+                    return bridgeMode(name, factory(handle.context), handle.dispose, handle.entering, 
+                    // An interrupted mode leaves no snap behind (leaving it is cleared by the engine)
+                    () => context.snapService.clear());
                 }
                 catch (error) {
                     handle.dispose();

package/dist/api/impl/input.js

@@ -83,9 +83,10 @@ const BRIDGED = Symbol('extension mode');
  * @param onExit - Called after the mode was left, to end what its context holds
  * @param entering - Runs the entering of the mode, so that its context knows the cursor the
  *   mode sets then
+ * @param onCancelled - Called after the mode was interrupted, to clear what its input left
  * @internal
  */
-export function bridgeMode(name, handler, onExit, entering = (run) => run()) {
+export function bridgeMode(name, handler, onExit, entering = (run) => run(), onCancelled = () => { }) {
     const bridged = {
         [BRIDGED]: handler,
         modeName: name,
@@ -102,7 +103,15 @@ export function bridgeMode(name, handler, onExit, entering = (run) => run()) {
             }
         },
         onExternalStateChange() {
-            handler.onCancel?.();
+            bridged.cancel();
+        },
+        cancel() {
+            try {
+                handler.onCancel?.();
+            }
+            finally {
+                onCancelled();
+            }
         },
         undoVertex: () => handler.onUndoVertex?.() === true,
         redoVertex: () => handler.onRedoVertex?.() === true,
@@ -136,7 +145,7 @@ export function routeToMode(handler, event, snapped, snap) {
         return undefined;
     const consumed = deliver(mode, event, snapped, snap);
     if (!consumed && event.type === 'keydown' && event.key === 'Escape' && mode.onCancel) {
-        mode.onCancel();
+        handler.cancel();
         return true;
     }
     return consumed;

package/dist/dataset/chunk-set.js

@@ -313,11 +313,10 @@ export class DisplayChunkSet {
             }
             drawChunkBatches(state.batches, renderers, zoom, projectionData, factors);
             // The features that cannot be retained are drawn immediately, right after the retained
-            // batches of the chunk, the points last (the immediate-mode path is not multiplied by the
-            // factors)
+            // batches of the chunk, the points last (with the same factors as the retained batches)
             const { fallback, pointFallback } = state.batches;
             if (fallback.length > 0 || pointFallback.length > 0) {
-                target.beginFrame(projectionData, zoom);
+                target.beginFrame(projectionData, zoom, undefined, factors);
                 for (const feature of fallback)
                     target.processFeature(feature, false);
                 for (const feature of pointFallback)

package/dist/dataset/dataset.js

@@ -608,12 +608,13 @@ export class DatasetImpl {
             this.chunks.draw({ target, renderers, terrain, projectionData, zoom, bounds, factors });
         }
         else {
-            this.drawImmediate(target, projectionData, zoom, bounds);
+            this.drawImmediate(target, projectionData, zoom, bounds, factors);
         }
         drawSelectionHighlight({
             target,
             projectionData,
             zoom,
+            factors,
             bounds,
             selected: this.selected,
             styles: this.chunks.retainedRenderers?.styles,
@@ -710,9 +711,10 @@ export class DatasetImpl {
      * Draws in immediate mode (the path for an environment without the retained-mode renderers)
      *
      * The frame of the batch is started without passing a layer. The rules have already been
-     * evaluated here, so the rule evaluation of the rendering side (FeatureDrawer) is not used.
+     * evaluated here, so the rule evaluation of the rendering side (FeatureDrawer) is not used. The
+     * factors of the frame are passed, the same as to the retained batches.
      */
-    drawImmediate(target, projectionData, zoom, bounds) {
+    drawImmediate(target, projectionData, zoom, bounds, factors) {
         const rows = this.source.index.search(bounds).filter((row) => this.thinning.isDrawnRow(row));
         let visible = this.styler.prepareAll(this.featuresOf(rows));
         // A point drawn by an external renderer is not drawn by core (without a predicate it passes
@@ -722,7 +724,7 @@ export class DatasetImpl {
         }
         if (visible.length === 0)
             return;
-        target.beginFrame(projectionData, zoom);
+        target.beginFrame(projectionData, zoom, undefined, factors);
         for (const feature of visible) {
             target.processFeature(feature, false);
         }

package/dist/dataset/retained.js

@@ -812,7 +812,7 @@ function collectPoint(feature, coord, draft, styles, isExternallyRenderedPoint)
     const style = styles.getPointStyle(feature);
     const shape = toInstancedPointShape(style.shape);
     if (!shape) {
-        // The path that goes to immediate mode is not multiplied by the factors of zoomScale
+        // The immediate-mode path gets the same factors of zoomScale (DisplayBatchTarget.beginFrame)
         pushFallback(draft, feature);
         return;
     }
@@ -836,7 +836,7 @@ function collectLine(feature, coords, draft, styles, skipDraped = false) {
     if (skipDraped && strokeStyle.opacity > 0 && strokeStyle.width > 0)
         return;
     if (strokeStyle.lineStyle !== 'solid') {
-        // The path that goes to immediate mode is not multiplied by the factors of zoomScale
+        // The immediate-mode path gets the same factors of zoomScale (DisplayBatchTarget.beginFrame)
         pushFallback(draft, feature);
         return;
     }
@@ -870,7 +870,7 @@ function collectPolygon(feature, rings, draft, styles, partIndex = 0, skipDraped
     if (skipDraped)
         return;
     if (hasStroke && strokeStyle.lineStyle !== 'solid') {
-        // The path that goes to immediate mode is not multiplied by the factors of zoomScale
+        // The immediate-mode path gets the same factors of zoomScale (DisplayBatchTarget.beginFrame)
         pushFallback(draft, feature);
         return;
     }

package/dist/dataset/selection.js

@@ -39,7 +39,7 @@ export function drawSelectionHighlight(input) {
     const visible = input.selected.filter((feature) => feature.visible && boundsIntersect(getBoundingBox(feature), bounds));
     if (visible.length === 0)
         return;
-    target.beginFrame(projectionData, zoom);
+    target.beginFrame(projectionData, zoom, undefined, input.factors);
     for (const feature of visible) {
         const prepared = input.prepare(feature);
         // The hand-over decision (drapedFills) switches a few frames late, so looking only at it

package/dist/dispatcher/input-router.js

@@ -123,12 +123,14 @@ export function createInputRouter(deps) {
      *
      * Whether snapping is wanted is asked of the current mode per input type
      * (isSnapEnabledFor). A mode that does not declare it snaps for every input type
-     * (as before).
+     * (as before). An input that is not snapped clears the previous result, so the
+     * indicator of an earlier snap does not stay behind it.
      */
     function applySnap(event, inputType) {
-        if (!snapService || event.snap === false)
+        if (!snapService)
             return { event, result: null };
-        if (modeManager.getHandler()?.isSnapEnabledFor?.(inputType) === false) {
+        if (event.snap === false || modeManager.getHandler()?.isSnapEnabledFor?.(inputType) === false) {
+            snapService.clear();
             return { event, result: null };
         }
         const result = snapService.resolve(event.lngLat, event.point, buildSnapContext(event.modifiers));

package/dist/modes/select/mode.js

@@ -80,6 +80,14 @@ export class SelectMode {
             store.setSelection(null, []);
         }, 'silent');
     }
+    /**
+     * Snapping applies only while a vertex or a feature is dragged: a click or a hover in
+     * select is not snapped (and draws no indicator). A mode of the contract that wants the
+     * snapped position of a point asks `snap` of its ModeContext.
+     */
+    isSnapEnabledFor(inputType) {
+        return inputType === 'dragstart' || inputType === 'dragmove' || inputType === 'dragend';
+    }
     /**
      * Called after a state change from the outside (a change applied from outside the mode).
      * Resets the mode's internal state to keep it consistent.

package/dist/snapping/service.js

@@ -110,6 +110,17 @@ export function createSnapService(deps = {}) {
         }
         return result;
     }
+    /**
+     * Drops the result when it holds a target, emitting the change once without a target (the
+     * same event as a snap that comes off). A result without a target is left as it is.
+     */
+    function clear() {
+        if (!lastResult?.target)
+            return;
+        const { lngLat } = lastResult;
+        lastResult = null;
+        deps.eventEmitter?.emit('snap.change', { lngLat });
+    }
     /**
      * Evaluates a single candidate and updates best
      *
@@ -248,7 +259,10 @@ export function createSnapService(deps = {}) {
         },
         setEnabled(value) {
             enabled = value;
+            if (!value)
+                clear();
         },
+        clear,
         setTolerance(px) {
             options.tolerancePx = px;
         },
@@ -260,6 +274,8 @@ export function createSnapService(deps = {}) {
         },
         setKindEnabled(kind, value) {
             options.kinds[kind] = value;
+            if (!value)
+                clear();
         },
         isKindEnabled(kind) {
             return options.kinds[kind];

package/dist/view/layer/renderers.d.ts

@@ -12,6 +12,7 @@ import type { PixelRatioInput } from '../../shared/utils/pixel-ratio.js';
 import type { SpatialIndex } from '../../store/spatial/spatial-index.js';
 import type { Store } from '../../store/store.js';
 import { TextureCache } from '../cache/texture.js';
+import { AnchoredOutlineRenderer } from '../renderers/anchored-outline.js';
 import { BatchManager } from '../renderers/batch-manager.js';
 import { FeatureDrawer } from '../renderers/drawer.js';
 import { type ImageErrorFn, ImageRenderer } from '../renderers/image.js';
@@ -37,6 +38,8 @@ export interface Renderers {
     quadShader: QuadShader;
     imageRenderer: ImageRenderer;
     strokeRenderer: StrokeRenderer;
+    /** The outlines laid on the screen around an anchor (the frames of points) */
+    outlineRenderer: AnchoredOutlineRenderer;
     sdfLineRenderer: SDFLineRenderer;
     pointShapeRenderer: PointShapeRenderer;
     pointInstanceRenderer: PointInstanceRenderer;

package/dist/view/layer/renderers.js

@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
 import { TextureCache } from '../cache/texture.js';
+import { AnchoredOutlineRenderer } from '../renderers/anchored-outline.js';
 import { BatchManager } from '../renderers/batch-manager.js';
 import { FeatureDrawer } from '../renderers/drawer.js';
 import { ImageRenderer } from '../renderers/image.js';
@@ -27,6 +28,7 @@ export function initRenderers(deps) {
     const quadShader = new QuadShader(gl).useTerrainState(terrain);
     const imageRenderer = new ImageRenderer(mapInstance, gl, textureCache, quadShader, (fileId) => store.getFile(fileId), onImageError);
     const strokeRenderer = new StrokeRenderer(mapInstance, gl, pixelRatio, terrain);
+    const outlineRenderer = new AnchoredOutlineRenderer(mapInstance, gl, pixelRatio, terrain);
     const sdfLineRenderer = new SDFLineRenderer(mapInstance, gl, pixelRatio, terrain);
     const pointShapeRenderer = new PointShapeRenderer(mapInstance, gl, pixelRatio, terrain);
     const pointInstanceRenderer = new PointInstanceRenderer(mapInstance, gl, pixelRatio, terrain);
@@ -35,7 +37,7 @@ export function initRenderers(deps) {
     const sdfPolygonRenderer = new SDFPolygonRenderer(gl, pixelRatio, polygonScope);
     const fillShaderManager = new FillShaderManager(gl, terrain);
     const selectionExtensions = scope.selection.extensions;
-    const selectionUIRenderer = new SelectionUIRenderer(strokeRenderer, selectionConfig, selectionExtensions, terrain);
+    const selectionUIRenderer = new SelectionUIRenderer(strokeRenderer, outlineRenderer, selectionConfig, selectionExtensions, terrain);
     // The tile size of this instance's map (read by the custom bounding box calculators)
     const tileSize = mapInstance.transform?.tileSize ?? 512;
     selectionExtensions.setTileSize(tileSize);
@@ -74,6 +76,7 @@ export function initRenderers(deps) {
         tentativeRenderer,
         quadShader,
         strokeRenderer,
+        outlineRenderer,
         pointShapeRenderer,
         pointInstanceRenderer,
         sdfLineRenderer,
@@ -95,6 +98,7 @@ export function initRenderers(deps) {
         quadShader,
         imageRenderer,
         strokeRenderer,
+        outlineRenderer,
         sdfLineRenderer,
         pointShapeRenderer,
         pointInstanceRenderer,
@@ -125,6 +129,7 @@ const GPU_OWNERS = [
     'textureCache',
     'quadShader',
     'strokeRenderer',
+    'outlineRenderer',
     'pointShapeRenderer',
     'pointInstanceRenderer',
     'sdfLineRenderer',

package/dist/view/renderers/anchored-outline.d.ts

@@ -0,0 +1,5 @@
+/** A point of the screen relative to the anchor, in CSS px (y points down) */
+export interface OutlineOffset {
+    x: number;
+    y: number;
+}