@sakuzu/maplibre-gl-draw 2.1.3 → 2.2.0

package/CHANGELOG.md

@@ -6,6 +6,64 @@ the project follows semantic versioning.
 
 ## [Unreleased]
 
+## [2.2.0] - 2026-10-10
+
+Features can be written as GeoJSON without a drawing, a store that holds
+only part of the document can keep the numbers of the automatic names,
+and an image keeps a small format on a browser that cannot encode WebP.
+
+### Added in 2.2.0
+
+- `featuresToGeoJSON(features, options)` and `featureToGeoJSON(feature,
+  options)` write features that need not be in a drawing with the rules of
+  `document.toGeoJSON`: rounding, ring orientation, the antimeridian, the
+  prefixed keys and the bbox. `ToGeoJSONOptions.getFile` reads the file of
+  an Image by its ID, and an Image whose file it does not find is written
+  without its pixels.
+- `Store` gets two optional members, `getMaxNameNumber(type)` and
+  `recordNameNumber(type, number)`. A store that holds only part of the
+  document implements them so that a number used in the part it does not
+  hold is not used again for an automatic name. A store without them is
+  numbered as before.
+
+### Changed in 2.2.0
+
+- `FileData.mimeType` of an image that was converted is the type the
+  browser returned, not the one requested
+  ([#31](https://github.com/sakuzu/maplibre-gl-draw/issues/31)).
+- When the browser cannot encode WebP, an image with no transparent pixel
+  is encoded as JPEG (quality 0.92) instead of being kept as PNG, so a
+  photo stays small. An image with a transparent pixel keeps the format
+  the browser returns
+  ([#34](https://github.com/sakuzu/maplibre-gl-draw/issues/34)).
+
+## [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
@@ -1218,7 +1276,9 @@ available from Kasika, Inc.
 - A read-only mode and an interaction lock.
 - Plugins, custom modes and custom feature types.
 
-[Unreleased]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.2...HEAD
+[Unreleased]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.2.0...HEAD
+[2.2.0]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.4...v2.2.0
+[2.1.4]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.3...v2.1.4
 [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

package/README.ja.md

@@ -99,7 +99,8 @@ GeoParquet や Arrow の表は、点、線、多角形が行ごとに混ざっ
 含めて保存でき、読み込めば同じ状態に戻ります。GeoJSON で書き出せば、
 ほかのツールと地物をやり取りできます。地物は GeoJSON の図形と
 GeoJSON の properties を持つので、ファイルはコードで読む地物と同じ形に
-なります。
+なります。描画の外に持っている地物も、`featuresToGeoJSON` で同じ規則で
+書き出せます。
 変更は取引ごとに 1 つのイベントで、出どころを添えて届きます。文書を
 保存するストアは差し替えられます
 ([保存と読み込み](docs/guides/save-load.ja.md))。

package/README.md

@@ -103,7 +103,8 @@ Write the document in the native format to keep layers, groups, styles
 and images, and load it to get the same state back. Write it as GeoJSON
 to exchange features with other tools: a feature holds a GeoJSON
 geometry and GeoJSON properties, so the file has the shape of the
-features you read in code.
+features you read in code. Features kept outside a drawing are written
+with the same rules by `featuresToGeoJSON`.
 Every change arrives as one event per transaction, with where it came
 from, and the store that holds the document can be replaced
 ([save and load](docs/guides/save-load.md)).

package/dist/api/extension/store.d.ts

@@ -5,7 +5,7 @@
  * option of `createDraw`, for example to keep the document somewhere shared.
  */
 import type { DocumentChange } from '../events.js';
-import type { Feature, FileData, Group, Layer, Metadata } from '../model.js';
+import type { Feature, FeatureType, FileData, Group, Layer, Metadata } from '../model.js';
 import type { Mode, Selection, SelectionType, VertexSelection } from '../state.js';
 /**
  * Where a write came from, as it arrives in {@link DocumentChange.source} and in the `source` of
@@ -187,4 +187,25 @@ export interface Store extends StoreView {
     setInteractionLock(value: boolean): void;
     /** Hides or shows an item in this client. */
     setLocallyHidden(id: string, hidden: boolean): void;
+    /**
+     * The largest number of a generated name ("Point 7") the Store knows to be used for this
+     * type: a feature type, `'Layer'` or `'Group'`. Optional.
+     *
+     * The instance numbers the names of new features, layers and groups from the names it can
+     * read through `listFeatures`, `listLayers` and `listGroups`. A Store that holds only part
+     * of the document can implement this method to give the numbers used in the part it does
+     * not hold, so that they are not used again: the next number is the one after the larger
+     * of the two. Return `undefined` when the Store knows nothing more than what it lists.
+     */
+    getMaxNameNumber?(type: FeatureType | 'Layer' | 'Group'): number | undefined;
+    /**
+     * Tells the Store the number of a name the instance has just generated for this type: a
+     * feature type, `'Layer'` or `'Group'`. Optional.
+     *
+     * It is called once per generated name, as the name is generated; the name may still not be
+     * written (a refused write leaves its number unused, as a deletion does). A Store that
+     * implements {@link Store.getMaxNameNumber} can use it to keep what that method returns up
+     * to date.
+     */
+    recordNameNumber?(type: FeatureType | 'Layer' | 'Group', number: number): void;
 }

package/dist/api/impl/import-export/embedded-file.d.ts

@@ -8,6 +8,7 @@ export interface EmbeddedFileContent {
  *
  * @param dataURL - the image data URL found in the data
  * @param mimeType - the MIME type declared next to it
- * @returns the content to store, or null when it is not an accepted embedded image
+ * @returns the content to store, or null when it is not an accepted embedded image, or when
+ *   it has to be scaled down and the browser returns the result in a type that is not accepted
  */
 export declare function normalizeEmbeddedFile(dataURL: unknown, mimeType: unknown): Promise<EmbeddedFileContent | null>;

package/dist/api/impl/import-export/embedded-file.js

@@ -9,13 +9,14 @@
  * texture limit is scaled down here, the same as when an image file is loaded.
  */
 import { readEmbeddedImage } from '../../../shared/utils/embedded-image.js';
-import { exceedsMaxImageSize, processImageDataUrl } from '../../../shared/utils/image.js';
+import { exceedsMaxImageSize, processImageDataUrl, UnsupportedImageTypeError, } from '../../../shared/utils/image.js';
 /**
  * Validates and normalizes an embedded image
  *
  * @param dataURL - the image data URL found in the data
  * @param mimeType - the MIME type declared next to it
- * @returns the content to store, or null when it is not an accepted embedded image
+ * @returns the content to store, or null when it is not an accepted embedded image, or when
+ *   it has to be scaled down and the browser returns the result in a type that is not accepted
  */
 export async function normalizeEmbeddedFile(dataURL, mimeType) {
     const info = readEmbeddedImage(dataURL);
@@ -24,7 +25,15 @@ export async function normalizeEmbeddedFile(dataURL, mimeType) {
     if (mimeType !== info.mimeType)
         return null;
     if (exceedsMaxImageSize(info.width, info.height)) {
-        const processed = await processImageDataUrl(dataURL);
+        let processed;
+        try {
+            processed = await processImageDataUrl(dataURL);
+        }
+        catch (error) {
+            if (error instanceof UnsupportedImageTypeError)
+                return null;
+            throw error;
+        }
         return { mimeType: processed.mimeType, dataURL: processed.dataUrl };
     }
     return { mimeType: info.mimeType, dataURL };

package/dist/api/impl/import-export/geojson-export.d.ts

@@ -1,5 +1,7 @@
 import type { Store } from '../../../store/store.js';
-import type { ExportOptions, Feature } from '../../../store/types.js';
+import type { ExportOptions, Feature, FileData } from '../../../store/types.js';
+/** Reads an embedded file by its ID (undefined when there is no such file) */
+export type ReadFile = (id: string) => FileData | undefined;
 /**
  * Converts an internal Feature into a GeoJSON Feature
  *
@@ -10,10 +12,22 @@ import type { ExportOptions, Feature } from '../../../store/types.js';
  *     properties with the maplibre-gl-draw: prefix
  *   - the positions are rounded and the rings oriented (see the top of this file)
  *   - a type that is not the type of its geometry is identified by featureType
- *   - for an Image feature, the image data is embedded as Base64
+ *   - for an Image feature, the image data is embedded as Base64, when `readFile` is given
+ *     and finds its file
+ *
+ * @param readFile - Reads the file of an Image by its ID
  */
-export declare function convertFeatureToGeoJSON(feature: Feature, store: Store): GeoJSON.Feature<GeoJSON.Geometry> | null;
+export declare function convertFeatureToGeoJSON(feature: Feature, readFile?: ReadFile): GeoJSON.Feature<GeoJSON.Geometry> | null;
 /**
  * Exports the current data as a GeoJSON FeatureCollection
  */
 export declare function exportGeoJSON(store: Store, options?: ExportOptions): GeoJSON.FeatureCollection<GeoJSON.Geometry>;
+/**
+ * Converts internal Features into a GeoJSON FeatureCollection, in the order given
+ *
+ * A feature whose geometry cannot be exported is left out. The collection carries the bbox of
+ * every exported position, unless nothing was exported.
+ *
+ * @param readFile - Reads the file of an Image by its ID
+ */
+export declare function convertFeaturesToGeoJSON(features: readonly Feature[], readFile?: ReadFile): GeoJSON.FeatureCollection<GeoJSON.Geometry>;

package/dist/api/impl/import-export/geojson-export.js

@@ -4,6 +4,10 @@
  * Conversion from the internal Feature to the GeoJSON format + export of a
  * GeoJSON FeatureCollection
  *
+ * The conversion is pure: it reads only the features it is given and, for the image of an
+ * Image, the function that reads an embedded file. The export of the document puts the
+ * features of the Store in their order and converts them with the same functions.
+ *
  * The output follows RFC 7946: every position is rounded to GEOJSON_COORDINATE_DECIMALS
  * decimal places, the rings of a polygon follow the right-hand rule (the outer ring
  * counter-clockwise, the holes clockwise) whatever orientation they were drawn in, every
@@ -107,9 +111,12 @@ function exportGeometry(geometry) {
  *     properties with the maplibre-gl-draw: prefix
  *   - the positions are rounded and the rings oriented (see the top of this file)
  *   - a type that is not the type of its geometry is identified by featureType
- *   - for an Image feature, the image data is embedded as Base64
+ *   - for an Image feature, the image data is embedded as Base64, when `readFile` is given
+ *     and finds its file
+ *
+ * @param readFile - Reads the file of an Image by its ID
  */
-export function convertFeatureToGeoJSON(feature, store) {
+export function convertFeatureToGeoJSON(feature, readFile) {
     const properties = {};
     // Add the properties as they are (the values of this library already carry the prefix).
     // They are defined as own properties so that a `__proto__` key is written out instead of
@@ -120,7 +127,9 @@ export function convertFeatureToGeoJSON(feature, store) {
     // Add the metadata
     properties[`${DRAW_PROPERTY_PREFIX}id`] = feature.id;
     properties[`${DRAW_PROPERTY_PREFIX}layerId`] = feature.layerId;
-    if (feature.groupId !== undefined) {
+    // A feature given from outside a drawing may carry `null` for no group, which is read as
+    // undefined at the boundary
+    if (feature.groupId != null) {
         properties[`${DRAW_PROPERTY_PREFIX}groupId`] = feature.groupId;
     }
     if (!feature.visible) {
@@ -130,7 +139,8 @@ export function convertFeatureToGeoJSON(feature, store) {
         properties[`${DRAW_PROPERTY_PREFIX}locked`] = true;
     }
     if (Object.keys(feature.style).length > 0) {
-        properties[`${DRAW_PROPERTY_PREFIX}style`] = feature.style;
+        // A copy, so that changing the output does not change the feature given
+        properties[`${DRAW_PROPERTY_PREFIX}style`] = structuredClone(feature.style);
     }
     const geometry = exportGeometry(feature.geometry);
     if (!geometry) {
@@ -146,7 +156,7 @@ export function convertFeatureToGeoJSON(feature, store) {
     // Embed the image data of an Image as Base64
     if (feature.type === 'Image') {
         const imageFileId = getDrawProperty(feature, 'imageFileId');
-        const fileData = imageFileId ? store.getFile(imageFileId) : undefined;
+        const fileData = imageFileId && readFile ? readFile(imageFileId) : undefined;
         if (fileData) {
             properties[`${DRAW_PROPERTY_PREFIX}imageData`] = fileData.dataURL;
             properties[`${DRAW_PROPERTY_PREFIX}imageMimeType`] = fileData.mimeType;
@@ -179,9 +189,20 @@ export function exportGeoJSON(store, options) {
         const layerIdSet = new Set(options.layerIds);
         features = features.filter((f) => layerIdSet.has(f.layerId));
     }
+    return convertFeaturesToGeoJSON(features, (id) => store.getFile(id));
+}
+/**
+ * Converts internal Features into a GeoJSON FeatureCollection, in the order given
+ *
+ * A feature whose geometry cannot be exported is left out. The collection carries the bbox of
+ * every exported position, unless nothing was exported.
+ *
+ * @param readFile - Reads the file of an Image by its ID
+ */
+export function convertFeaturesToGeoJSON(features, readFile) {
     const geoJSONFeatures = [];
     for (const feature of features) {
-        const geoFeature = convertFeatureToGeoJSON(feature, store);
+        const geoFeature = convertFeatureToGeoJSON(feature, readFile);
         if (geoFeature) {
             geoJSONFeatures.push(geoFeature);
         }

package/dist/api/impl/options.js

@@ -197,7 +197,10 @@ const RUNTIME_CHECKS = {
     }),
     isExternalEntry: func,
 };
-/** The members of the public Store the instance calls; `abortIntermediateUpdates` is optional */
+/**
+ * The members of the public Store the instance calls; `abortIntermediateUpdates`,
+ * `getMaxNameNumber` and `recordNameNumber` are optional
+ */
 const STORE_METHODS = [
     'getFeature',
     'listFeatures',

package/dist/api/model.d.ts

@@ -485,3 +485,37 @@ export declare function deriveLegend(rule: StyleRule, messages?: Partial<Message
  * @returns `point` for points, `stroke` for lines and `fill` for areas
  */
 export declare function getStyleRuleChannel(type: FeatureType): 'point' | 'stroke' | 'fill';
+/** Options of {@link featuresToGeoJSON} and {@link featureToGeoJSON}. */
+export interface ToGeoJSONOptions {
+    /**
+     * Reads an embedded file by its ID, for the pixels of an Image: `(id) => store.getFile(id)`,
+     * for example. An Image whose file it does not find, or every Image when it is left out, is
+     * written without `maplibre-gl-draw:imageData` and `maplibre-gl-draw:imageMimeType`.
+     */
+    getFile?: (id: string) => FileData | undefined;
+}
+/**
+ * Writes features as a GeoJSON FeatureCollection, as `document.toGeoJSON` writes the
+ * document, without a drawing: the features need not be in one.
+ *
+ * The features come out in the order given (`document.toGeoJSON` gives the draw order, with
+ * the hidden features at the end). The rules of the output are those of `document.toGeoJSON`:
+ * positions rounded to 7 decimal places, rings by the right-hand rule, longitudes brought into
+ * -180 to 180, the values of the feature added to `properties` under the prefixed keys, and a
+ * `bbox` unless nothing was written. A feature whose geometry is a GeometryCollection is left
+ * out. The features given are not changed.
+ *
+ * @param features - The features, in the order to write them
+ * @param options - Where the files of the images are read from
+ * @returns The FeatureCollection
+ */
+export declare function featuresToGeoJSON(features: readonly Feature[], options?: ToGeoJSONOptions): GeoJSONFeatureCollection;
+/**
+ * Writes one feature as a GeoJSON Feature, as {@link featuresToGeoJSON} writes each of its
+ * features.
+ *
+ * @param feature - The feature
+ * @param options - Where the file of an image is read from
+ * @returns The Feature, or `null` when its geometry is a GeometryCollection
+ */
+export declare function featureToGeoJSON(feature: Feature, options?: ToGeoJSONOptions): GeoJSONFeature | null;

package/dist/api/model.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 import { isDrawProperty as isLibraryKey } from '../shared/properties.js';
 import { deriveLegend as deriveRuleLegend, evaluateStyleRule as evaluateRule, getStyleRuleChannel as getRuleChannel, } from '../view/style-rule.js';
+import { convertFeaturesToGeoJSON, convertFeatureToGeoJSON, } from './impl/import-export/geojson-export.js';
 export { DRAW_PROPERTY_PREFIX } from '../shared/properties.js';
 /**
  * Whether a key of `properties` holds a value of the library, so that an attribute panel can
@@ -45,3 +46,32 @@ export function deriveLegend(rule, messages) {
 export function getStyleRuleChannel(type) {
     return getRuleChannel(type);
 }
+/**
+ * Writes features as a GeoJSON FeatureCollection, as `document.toGeoJSON` writes the
+ * document, without a drawing: the features need not be in one.
+ *
+ * The features come out in the order given (`document.toGeoJSON` gives the draw order, with
+ * the hidden features at the end). The rules of the output are those of `document.toGeoJSON`:
+ * positions rounded to 7 decimal places, rings by the right-hand rule, longitudes brought into
+ * -180 to 180, the values of the feature added to `properties` under the prefixed keys, and a
+ * `bbox` unless nothing was written. A feature whose geometry is a GeometryCollection is left
+ * out. The features given are not changed.
+ *
+ * @param features - The features, in the order to write them
+ * @param options - Where the files of the images are read from
+ * @returns The FeatureCollection
+ */
+export function featuresToGeoJSON(features, options) {
+    return convertFeaturesToGeoJSON(features, options?.getFile);
+}
+/**
+ * Writes one feature as a GeoJSON Feature, as {@link featuresToGeoJSON} writes each of its
+ * features.
+ *
+ * @param feature - The feature
+ * @param options - Where the file of an image is read from
+ * @returns The Feature, or `null` when its geometry is a GeometryCollection
+ */
+export function featureToGeoJSON(feature, options) {
+    return convertFeatureToGeoJSON(feature, options?.getFile);
+}

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/index.d.ts

@@ -70,3 +70,5 @@ export type { CompanionProvider, HandleProvider, Hit, SnapCandidate, SnapProvide
 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';
+export type { ToGeoJSONOptions } from './api/model.js';
+export { featuresToGeoJSON, featureToGeoJSON } from './api/model.js';

package/dist/index.js

@@ -6,3 +6,4 @@ export { MODES } from './api/state.js';
 export { DrawError } from './api/errors.js';
 // Style rule functions
 export { deriveLegend, evaluateStyleRule, getStyleRuleChannel } from './api/model.js';
+export { featuresToGeoJSON, featureToGeoJSON } from './api/model.js';

package/dist/shared/utils/image.d.ts

@@ -1,22 +1,31 @@
-/**
- * Image processing utilities
- *
- * Converts an image file into the WebP format, resizing it when necessary.
- */
 export interface ProcessedImage {
     dataUrl: string;
     width: number;
     height: number;
     mimeType: string;
 }
+/**
+ * The error thrown when the canvas returns an image of a type the library does not accept
+ *
+ * A browser that cannot encode the requested type returns another one (usually PNG); one that
+ * is not PNG / JPEG / WebP / GIF cannot be stored as an embedded image.
+ */
+export declare class UnsupportedImageTypeError extends Error {
+    constructor(mimeType: string);
+}
 /**
  * Maximum size of an image
  * A value that accounts for the WebGL texture limit (modern GPUs support 4096 or more)
  */
 export declare const MAX_IMAGE_SIZE = 4096;
 /**
- * Converts a file into a DataURL in the WebP format
+ * Converts a file into a DataURL in the WebP format. When the browser cannot encode WebP, an image
+ * with no transparent pixel is encoded as JPEG, and one with a transparent pixel keeps the format
+ * the browser returns (such as PNG)
  * A large image is resized automatically
+ *
+ * @throws UnsupportedImageTypeError when the browser returns a type other than PNG / JPEG /
+ *   WebP / GIF
  */
 export declare function processImageFile(file: File): Promise<ProcessedImage>;
 /**
@@ -24,7 +33,12 @@ export declare function processImageFile(file: File): Promise<ProcessedImage>;
  */
 export declare function exceedsMaxImageSize(width: number, height: number): boolean;
 /**
- * Converts an image DataURL into a DataURL in the WebP format
+ * Converts an image DataURL into a DataURL in the WebP format. When the browser cannot encode
+ * WebP, an image with no transparent pixel is encoded as JPEG, and one with a transparent pixel
+ * keeps the format the browser returns (such as PNG)
  * A large image is resized automatically
+ *
+ * @throws UnsupportedImageTypeError when the browser returns a type other than PNG / JPEG /
+ *   WebP / GIF
  */
 export declare function processImageDataUrl(originalDataUrl: string): Promise<ProcessedImage>;

package/dist/shared/utils/image.js

@@ -1,6 +1,42 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * Image processing utilities
+ *
+ * Converts an image file into the WebP format, resizing it when necessary. A browser that cannot
+ * encode WebP from a canvas returns another format (such as PNG). The image is then encoded as JPEG
+ * when none of its pixels is transparent, and otherwise keeps the format the browser returned.
+ */
+import { EMBEDDED_IMAGE_MIME_TYPES } from './embedded-image.js';
 const WEBP_QUALITY = 0.95;
+/** The quality of the JPEG an opaque image is encoded as when the browser cannot encode WebP */
+const JPEG_QUALITY = 0.92;
+/**
+ * The error thrown when the canvas returns an image of a type the library does not accept
+ *
+ * A browser that cannot encode the requested type returns another one (usually PNG); one that
+ * is not PNG / JPEG / WebP / GIF cannot be stored as an embedded image.
+ */
+export class UnsupportedImageTypeError extends Error {
+    constructor(mimeType) {
+        super(`The browser returned an image of an unsupported type: ${mimeType || '(none)'}`);
+        this.name = 'UnsupportedImageTypeError';
+    }
+}
+/** The type in the `data:<type>;` or `data:<type>,` prefix of a data URL */
+const DATA_URL_TYPE = /^data:([^;,]*)[;,]/;
+/**
+ * The type of the image a data URL holds, read from its prefix
+ *
+ * @throws UnsupportedImageTypeError when the type is not PNG / JPEG / WebP / GIF
+ */
+function acceptedImageType(dataUrl) {
+    const mimeType = DATA_URL_TYPE.exec(dataUrl)?.[1] ?? '';
+    if (!EMBEDDED_IMAGE_MIME_TYPES.includes(mimeType)) {
+        throw new UnsupportedImageTypeError(mimeType);
+    }
+    return mimeType;
+}
 /**
  * Maximum size of an image
  * A value that accounts for the WebGL texture limit (modern GPUs support 4096 or more)
@@ -27,8 +63,13 @@ function calculateResizedDimensions(width, height, maxSize) {
     return { width: newWidth, height: newHeight, needsResize: true };
 }
 /**
- * Converts a file into a DataURL in the WebP format
+ * Converts a file into a DataURL in the WebP format. When the browser cannot encode WebP, an image
+ * with no transparent pixel is encoded as JPEG, and one with a transparent pixel keeps the format
+ * the browser returns (such as PNG)
  * A large image is resized automatically
+ *
+ * @throws UnsupportedImageTypeError when the browser returns a type other than PNG / JPEG /
+ *   WebP / GIF
  */
 export async function processImageFile(file) {
     return processImageDataUrl(await fileToDataUrl(file));
@@ -40,8 +81,13 @@ export function exceedsMaxImageSize(width, height) {
     return width > MAX_IMAGE_SIZE || height > MAX_IMAGE_SIZE;
 }
 /**
- * Converts an image DataURL into a DataURL in the WebP format
+ * Converts an image DataURL into a DataURL in the WebP format. When the browser cannot encode
+ * WebP, an image with no transparent pixel is encoded as JPEG, and one with a transparent pixel
+ * keeps the format the browser returns (such as PNG)
  * A large image is resized automatically
+ *
+ * @throws UnsupportedImageTypeError when the browser returns a type other than PNG / JPEG /
+ *   WebP / GIF
  */
 export async function processImageDataUrl(originalDataUrl) {
     // 1. Load it as an Image (to get the dimensions)
@@ -60,15 +106,36 @@ export async function processImageDataUrl(originalDataUrl) {
     ctx.imageSmoothingEnabled = true;
     ctx.imageSmoothingQuality = 'high';
     ctx.drawImage(img, 0, 0, width, height);
-    // 4. Convert into WebP
-    const webpDataUrl = canvas.toDataURL('image/webp', WEBP_QUALITY);
+    // 4. Convert into WebP. A browser that cannot encode WebP returns another type, so the type
+    //    is read from the data URL it returned rather than taken from the request
+    let dataUrl = canvas.toDataURL('image/webp', WEBP_QUALITY);
+    let mimeType = acceptedImageType(dataUrl);
+    // 5. When the browser cannot encode WebP, an opaque image is encoded as JPEG, which is far
+    //    smaller than PNG for a photo. An image with a transparent pixel keeps the returned type,
+    //    because JPEG would lose the transparency
+    if (mimeType !== 'image/webp' && !hasTransparentPixel(ctx, width, height)) {
+        dataUrl = canvas.toDataURL('image/jpeg', JPEG_QUALITY);
+        mimeType = acceptedImageType(dataUrl);
+    }
     return {
-        dataUrl: webpDataUrl,
+        dataUrl,
         width,
         height,
-        mimeType: 'image/webp',
+        mimeType,
     };
 }
+/**
+ * Whether any pixel drawn on the canvas is not fully opaque (alpha below 255)
+ * Stops at the first such pixel
+ */
+function hasTransparentPixel(ctx, width, height) {
+    const { data } = ctx.getImageData(0, 0, width, height);
+    for (let i = 3; i < data.length; i += 4) {
+        if (data[i] < 255)
+            return true;
+    }
+    return false;
+}
 /**
  * Converts a File into a DataURL
  */

package/dist/shared/utils/name-generator.d.ts

@@ -75,6 +75,11 @@ export declare function normalizeAutoNameConfig(config: AutoNameConfig | boolean
  * any generation happened is also recorded (with the old approach it could be reused after the
  * deletion). This is an extension of the "a number used once is not reused" policy, and it can
  * only work in the direction of increasing the gaps.
+ *
+ * A Store that holds only part of the document can give, per type, the largest number it
+ * knows to be used (`getMaxNameNumber`): each generation then takes the number after the
+ * larger of that and the count above, and tells the Store the number it took
+ * (`recordNameNumber`). With a Store that has neither, the numbering is the count above alone.
  */
 export declare class AutoNameGenerator {
     private readonly store;
@@ -90,6 +95,8 @@ export declare class AutoNameGenerator {
         listLayers(): Layer[];
         listGroups(): Group[];
         subscribe(listener: (changes: StoreChange) => void): () => void;
+        getMaxNameNumber?(type: AutoNameType): number | undefined;
+        recordNameNumber?(type: AutoNameType, number: number): void;
     }, config?: AutoNameConfig | boolean);
     /**
      * Returns whether it is enabled
@@ -123,6 +130,11 @@ export declare class AutoNameGenerator {
      * not reused and a gap appears.
      */
     private findNextNumber;
+    /**
+     * Takes the next number of a counter key: the one after the larger of the counter and the
+     * largest number the Store knows (when it gives one), and tells the Store the number taken
+     */
+    private takeNextNumber;
     /**
      * Takes in the largest existing number only the first time a generation happens for that
      * counter key

package/dist/shared/utils/name-generator.js

@@ -66,6 +66,11 @@ export function normalizeAutoNameConfig(config) {
  * any generation happened is also recorded (with the old approach it could be reused after the
  * deletion). This is an extension of the "a number used once is not reused" policy, and it can
  * only work in the direction of increasing the gaps.
+ *
+ * A Store that holds only part of the document can give, per type, the largest number it
+ * knows to be used (`getMaxNameNumber`): each generation then takes the number after the
+ * larger of that and the count above, and tells the Store the number it took
+ * (`recordNameNumber`). With a Store that has neither, the numbering is the count above alone.
  */
 export class AutoNameGenerator {
     constructor(store, config = true) {
@@ -175,8 +180,20 @@ export class AutoNameGenerator {
      */
     findNextNumber(featureType, typeName) {
         this.scanOnce(featureType, () => this.getMaxNumberFromFeatures(featureType, typeName));
-        const nextNumber = (this.counters.get(featureType) ?? 0) + 1;
-        this.counters.set(featureType, nextNumber);
+        return this.takeNextNumber(featureType);
+    }
+    /**
+     * Takes the next number of a counter key: the one after the larger of the counter and the
+     * largest number the Store knows (when it gives one), and tells the Store the number taken
+     */
+    takeNextNumber(counterKey) {
+        const known = this.store.getMaxNameNumber?.(counterKey);
+        if (known !== undefined && Number.isSafeInteger(known)) {
+            this.recordNumber(counterKey, known);
+        }
+        const nextNumber = (this.counters.get(counterKey) ?? 0) + 1;
+        this.counters.set(counterKey, nextNumber);
+        this.store.recordNameNumber?.(counterKey, nextNumber);
         return nextNumber;
     }
     /**
@@ -312,9 +329,7 @@ export class AutoNameGenerator {
             }
             return maxNumber;
         });
-        const nextNumber = (this.counters.get(LAYER_COUNTER_KEY) ?? 0) + 1;
-        this.counters.set(LAYER_COUNTER_KEY, nextNumber);
-        return nextNumber;
+        return this.takeNextNumber(LAYER_COUNTER_KEY);
     }
     /**
      * Generates the name of a new Group
@@ -347,8 +362,6 @@ export class AutoNameGenerator {
             }
             return maxNumber;
         });
-        const nextNumber = (this.counters.get(GROUP_COUNTER_KEY) ?? 0) + 1;
-        this.counters.set(GROUP_COUNTER_KEY, nextNumber);
-        return nextNumber;
+        return this.takeNextNumber(GROUP_COUNTER_KEY);
     }
 }

package/dist/store/draw-store.js

@@ -162,6 +162,15 @@ export class DrawStore {
         return __classPrivateFieldGet(this, _DrawStore_instances, "m", _DrawStore_write).call(this, () => __classPrivateFieldGet(this, _DrawStore_contract, "f").setMetadata(metadata));
     }
     // ============================================================================
+    // The numbers of generated names (optional members of the contract)
+    // ============================================================================
+    getMaxNameNumber(type) {
+        return __classPrivateFieldGet(this, _DrawStore_contract, "f").getMaxNameNumber?.(type);
+    }
+    recordNameNumber(type, number) {
+        __classPrivateFieldGet(this, _DrawStore_contract, "f").recordNameNumber?.(type, number);
+    }
+    // ============================================================================
     // The state of this client (kept by the contract)
     // ============================================================================
     getSelection() {

package/dist/store/store.d.ts

@@ -19,7 +19,7 @@
  * DocumentStore is the document half the in-memory contract store is built on.
  */
 import type { Store as PublicStore } from '../api/extension/store.js';
-import type { BoxSelection, DragState, Feature, FileData, Group, Layer, Metadata, Mode, Selection, SelectionType, StoreChange, TentativeState, UpdateFeatureOptions, UpdateSource, VertexSelection } from './types.js';
+import type { BoxSelection, DragState, Feature, FeatureType, FileData, Group, Layer, Metadata, Mode, Selection, SelectionType, StoreChange, TentativeState, UpdateFeatureOptions, UpdateSource, VertexSelection } from './types.js';
 /**
  * The Store a host gives with the `store` option: the public `Store`, with the rules core
  * relies on
@@ -373,4 +373,11 @@ export interface Store extends StoreView, UiState {
     deleteFile(id: string): boolean;
     /** Sets the metadata, merging (see {@link DocumentStore.setMetadata}) */
     setMetadata(metadata: Partial<Metadata>): boolean;
+    /**
+     * The largest number of a generated name the Store knows to be used for this type, beyond
+     * what it lists, or undefined (see the public `Store.getMaxNameNumber`)
+     */
+    getMaxNameNumber?(type: FeatureType | 'Layer' | 'Group'): number | undefined;
+    /** Tells the Store the number of a name just generated (see the public `Store.recordNameNumber`) */
+    recordNameNumber?(type: FeatureType | 'Layer' | 'Group', number: number): void;
 }

package/dist/view/renderers/batch-manager.js

@@ -6,7 +6,7 @@ import { getCircleRadius, getCreatedZoom } from '../../shared/utils/property.js'
 import { densifyPathForGlobe } from '../globe-subdivision.js';
 import { TerrainContext } from '../terrain/context.js';
 import { anchorGhostOpacity } from '../terrain/occlusion.js';
-import { layerDrawFactors, NEUTRAL_DRAW_FACTORS, } from './draw-factors.js';
+import { combineDrawFactors, layerDrawFactors, NEUTRAL_DRAW_FACTORS, } from './draw-factors.js';
 import { getStrokeDashPattern, splitIntoDashes } from './line/dash.js';
 import { toInstancedPointShape, } from './point/point-instance.js';
 /**
@@ -310,12 +310,15 @@ export class BatchManager {
      *
      * @param layer The layer to draw (used to evaluate the style rules, and its opacity is
      *   multiplied into everything the frame draws; no factor when omitted)
+     * @param factors The draw factors of the frame itself (a dataset passes those of its
+     *   `zoomScale`). They are combined with the factors of the layer and multiplied into
+     *   everything the frame draws, the same as on the retained path; no factor when omitted
      */
-    beginFrame(projectionData, zoom, layer) {
+    beginFrame(projectionData, zoom, layer, factors = NEUTRAL_DRAW_FACTORS) {
         this.projectionData = projectionData;
         this.zoom = zoom;
         this.layer = layer;
-        this.factors = layerDrawFactors(layer);
+        this.factors = combineDrawFactors(layerDrawFactors(layer), factors);
         this.currentBatchType = null;
     }
     /**
@@ -408,7 +411,7 @@ export class BatchManager {
             }
             // Shapes that do not support instancing are drawn individually, one point at a time
             // (MultiPoint comes into this function part by part, so they are drawn per point)
-            this.featureDrawer.drawPointShape(coord, this.withLayerOpacity(style), this.zoom, feature.id);
+            this.featureDrawer.drawPointShape(coord, this.withFrameFactors(style), this.zoom, feature.id);
         }
         else {
             // Color, size and stroke are instance attributes, so the batch key only needs the shape
@@ -474,8 +477,9 @@ export class BatchManager {
         // the look does not change).
         const fixedWidth = getCreatedZoom(feature) === undefined;
         const createdZoom = getCreatedZoom(feature) ?? this.zoom;
-        // Compute the effective line width at the current zoom level
-        const effectiveStrokeWidth = strokeStyle.width * 2 ** (this.zoom - createdZoom);
+        // Compute the effective line width at the current zoom level (with the size factor of the
+        // frame, which the shader multiplies into the width, so the dashes follow the drawn width)
+        const effectiveStrokeWidth = strokeStyle.width * 2 ** (this.zoom - createdZoom) * this.factors.scale;
         // For dashed/dotted lines the dashes are computed on the CPU side
         const dashPattern = getStrokeDashPattern(strokeStyle.lineStyle, effectiveStrokeWidth);
         if (dashPattern) {
@@ -588,7 +592,8 @@ export class BatchManager {
         // convention as withFixedWidth; collectPolygons in retained mode does the same).
         const fixedWidth = getCreatedZoom(feature) === undefined;
         const createdZoom = getCreatedZoom(feature) ?? this.zoom;
-        const effectiveStrokeWidth = strokeStyle.width * 2 ** (this.zoom - createdZoom);
+        // The drawn width of the outline (with the size factor of the frame; the dashes follow it)
+        const effectiveStrokeWidth = strokeStyle.width * 2 ** (this.zoom - createdZoom) * this.factors.scale;
         const isDashed = strokeStyle.lineStyle !== 'solid';
         if (strokeStyle.opacity > 0 && !isDashed) {
             // For a solid line: drawn all at once by SDFPolygonRenderer
@@ -618,7 +623,7 @@ export class BatchManager {
             if (fillColor[3] > 0) {
                 this.polygonFillBatch.push({
                     coordinates: rings,
-                    color: this.colorWithLayerOpacity(fillColor),
+                    color: this.colorWithFrameOpacity(fillColor),
                     featureId: feature.id,
                     partIndex,
                 });
@@ -634,7 +639,7 @@ export class BatchManager {
         if (fillColor[3] > 0) {
             this.polygonFillBatch.push({
                 coordinates: rings,
-                color: this.colorWithLayerOpacity(fillColor),
+                color: this.colorWithFrameOpacity(fillColor),
                 featureId,
                 partIndex,
             });
@@ -678,23 +683,26 @@ export class BatchManager {
         }
     }
     /**
-     * A color with the opacity of the layer multiplied into its alpha (for the fill-only polygon
-     * batch, whose colors are per vertex and which has no factor uniform)
+     * A color with the opacity factor of the frame multiplied into its alpha (for the fill-only
+     * polygon batch, whose colors are per vertex and which has no factor uniform)
      */
-    colorWithLayerOpacity(color) {
+    colorWithFrameOpacity(color) {
         const opacity = this.factors.opacity;
         return opacity === 1 ? color : [color[0], color[1], color[2], color[3] * opacity];
     }
     /**
-     * A point style with the opacity of the layer multiplied in (for the per-point renderer, which
-     * has no factor uniform)
+     * A point style with the factors of the frame multiplied in (for the per-point renderer, which
+     * has no factor uniform): the size and the stroke width by the size factor, the opacities by
+     * the opacity factor
      */
-    withLayerOpacity(style) {
-        const opacity = this.factors.opacity;
-        if (opacity === 1)
+    withFrameFactors(style) {
+        const { scale, opacity } = this.factors;
+        if (scale === 1 && opacity === 1)
             return style;
         return {
             ...style,
+            size: style.size * scale,
+            strokeWidth: style.strokeWidth * scale,
             fillOpacity: style.fillOpacity * opacity,
             strokeOpacity: style.strokeOpacity * opacity,
         };

package/dist/view/renderers/draw-factors.d.ts

@@ -10,8 +10,11 @@
  * Conventions:
  *
  * - The default is `NEUTRAL_DRAW_FACTORS` (1x scale, opacity 1), so calls that
- *   pass no factors (Store rendering, immediate mode) look exactly as before,
+ *   pass no factors (the Store rendering, for example) look exactly as before,
  *   down to the pixel
+ * - The immediate-mode frame of a dataset takes its factors through
+ *   `BatchManager.beginFrame`, which combines them with the factors of the layer
+ *   (`combineDrawFactors`)
  * - A uniform is per-program residual state, so even rendering paths that do
  *   not use the factors must write 1 (a value left over from a previous draw
  *   makes another draw come out thinner; this is the same family of accident as
@@ -58,3 +61,10 @@ export declare function sanitizeDrawFactors(factors: {
 export declare function layerDrawFactors(layer: {
     readonly opacity?: number;
 } | null | undefined): RetainedDrawFactors;
+/**
+ * The product of two sets of factors (the frame's own factors over those of the layer)
+ *
+ * Both are taken as already rounded (`sanitizeDrawFactors`, `layerDrawFactors`). Neutral
+ * factors on either side give the other set itself.
+ */
+export declare function combineDrawFactors(a: RetainedDrawFactors, b: RetainedDrawFactors): RetainedDrawFactors;

package/dist/view/renderers/draw-factors.js

@@ -33,3 +33,16 @@ export function layerDrawFactors(layer) {
         return NEUTRAL_DRAW_FACTORS;
     return sanitizeDrawFactors({ scale: 1, opacity });
 }
+/**
+ * The product of two sets of factors (the frame's own factors over those of the layer)
+ *
+ * Both are taken as already rounded (`sanitizeDrawFactors`, `layerDrawFactors`). Neutral
+ * factors on either side give the other set itself.
+ */
+export function combineDrawFactors(a, b) {
+    if (b === NEUTRAL_DRAW_FACTORS || (b.scale === 1 && b.opacity === 1))
+        return a;
+    if (a === NEUTRAL_DRAW_FACTORS || (a.scale === 1 && a.opacity === 1))
+        return b;
+    return { scale: a.scale * b.scale, opacity: a.opacity * b.opacity };
+}

package/dist/view/renderers/line/line-shader.js

@@ -254,6 +254,11 @@ void main() {
     float lineWidth = (strokeWidth > 0.0
         ? strokeWidth * pow(2.0, u_zoom - createdZoom)
         : (strokeWidth < 0.0 ? -strokeWidth : u_width)) * u_size_scale;
+    // Below one pixel the line is drawn one pixel wide and fainter by its width, so the ink per
+    // unit of length follows the width and goes to nothing with it (the caps of every dash
+    // included, which would otherwise keep a blob of a fixed size)
+    float ink = clamp(lineWidth, 0.0, 1.0);
+    lineWidth = max(lineWidth, 1.0);
     float halfWidth = lineWidth / 2.0;
 
     // HHAA: expand by w+1 so that partially covered pixels are included too
@@ -298,7 +303,7 @@ void main() {
     v_linesofar = segmentStart + t * screenSegmentLength;  // cumulative distance (for dashes)
     v_line_pos = linePos;                  // position along the line
     v_seg_length = screenSegmentLength;    // segment length (computed on the GPU)
-    v_color = a_color;                     // line color (instance attribute)
+    v_color = a_color * ink;               // line color (instance attribute), by the ink
 }`;
 }
 /**

package/dist/view/renderers/point/point-instance.d.ts

@@ -55,6 +55,15 @@ export interface PointInstanceData {
  * Cutting the billboard exactly at the outer radius loses the outer half of the antialiasing.
  */
 export declare const POINT_AA_PADDING_PX = 1;
+/**
+ * The smallest outer radius a point is drawn at (device pixels): a diameter of one pixel
+ *
+ * A smaller point cannot be drawn smaller, since the antialiasing band alone is a pixel wide: its
+ * coverage would tend to a blob of a fixed size as the radius goes to 0, and the point would never
+ * fade. Below this radius the shape is drawn at it, fainter by the ratio of the areas
+ * (`pointInkFactor`), so the ink it leaves follows its area and goes to nothing with it.
+ */
+export declare const POINT_MIN_OUTER_PX = 0.5;
 /**
  * SDF boundaries of one instance (device pixels)
  */
@@ -85,6 +94,16 @@ export interface PointSdfEdges {
  * @param sizeScale Size factor at draw time (default 1)
  */
 export declare function pointSdfEdges(fillSizePx: number, strokeWidthPx: number, sizeScale?: number): PointSdfEdges;
+/**
+ * The factor the alpha of a point is multiplied by (the same computation as the shader)
+ *
+ * 1 at an outer radius of `POINT_MIN_OUTER_PX` and above. Below it the point is drawn at that
+ * radius (`pointSdfEdges`), and the factor is the ratio of its true area to the area drawn, so the
+ * ink it leaves follows its area and goes to 0 with it. A radius of 0 or below draws nothing (0).
+ *
+ * @param outerPx The outer radius (radius + stroke width, with the size factor; device pixels)
+ */
+export declare function pointInkFactor(outerPx: number): number;
 /**
  * Point batch of the retained mode (GPU resources)
  *

package/dist/view/renderers/point/point-instance.js

@@ -34,6 +34,15 @@ const AA_HALF_WIDTH_PX = 0.5;
  * Cutting the billboard exactly at the outer radius loses the outer half of the antialiasing.
  */
 export const POINT_AA_PADDING_PX = 1;
+/**
+ * The smallest outer radius a point is drawn at (device pixels): a diameter of one pixel
+ *
+ * A smaller point cannot be drawn smaller, since the antialiasing band alone is a pixel wide: its
+ * coverage would tend to a blob of a fixed size as the radius goes to 0, and the point would never
+ * fade. Below this radius the shape is drawn at it, fainter by the ratio of the areas
+ * (`pointInkFactor`), so the ink it leaves follows its area and goes to nothing with it.
+ */
+export const POINT_MIN_OUTER_PX = 0.5;
 // Stride of the instance data (floats per instance)
 // position(2) + fillColor(4) + strokeColor(4) + size(1) + strokeWidth(1)
 //   + elevation(1) = 13 floats
@@ -58,8 +67,34 @@ const SHAPE_UNIFORM = POINT_SHAPE_CODE;
 export function pointSdfEdges(fillSizePx, strokeWidthPx, sizeScale = 1) {
     const radius = Math.max(0, fillSizePx) * sizeScale;
     const outer = radius + Math.max(0, strokeWidthPx) * sizeScale;
+    // Below a diameter of one pixel the shape is drawn at that diameter (pointInkFactor)
+    if (outer > 0 && outer < POINT_MIN_OUTER_PX) {
+        const grow = POINT_MIN_OUTER_PX / outer;
+        return {
+            radius: radius * grow,
+            outer: POINT_MIN_OUTER_PX,
+            extent: POINT_MIN_OUTER_PX + POINT_AA_PADDING_PX,
+        };
+    }
     return { radius, outer, extent: outer + POINT_AA_PADDING_PX };
 }
+/**
+ * The factor the alpha of a point is multiplied by (the same computation as the shader)
+ *
+ * 1 at an outer radius of `POINT_MIN_OUTER_PX` and above. Below it the point is drawn at that
+ * radius (`pointSdfEdges`), and the factor is the ratio of its true area to the area drawn, so the
+ * ink it leaves follows its area and goes to 0 with it. A radius of 0 or below draws nothing (0).
+ *
+ * @param outerPx The outer radius (radius + stroke width, with the size factor; device pixels)
+ */
+export function pointInkFactor(outerPx) {
+    if (!(outerPx > 0))
+        return 0;
+    if (outerPx >= POINT_MIN_OUTER_PX)
+        return 1;
+    const ratio = outerPx / POINT_MIN_OUTER_PX;
+    return ratio * ratio;
+}
 /**
  * Rounds the origin of the relative coordinates to Float32
  */
@@ -326,6 +361,7 @@ flat out vec4 v_stroke_color;
 out vec2 v_offset_px;
 flat out float v_radius_px;
 flat out float v_outer_px;
+flat out float v_ink;
 
 void main() {
     // The anchor elevation comes from the CPU (the same source as hit testing).
@@ -338,6 +374,15 @@ void main() {
 
     float radius = max(a_instance_size, 0.0) * u_size_scale;
     float outer = radius + max(a_instance_stroke_width, 0.0) * u_size_scale;
+    // Below a diameter of one pixel the shape is drawn at that diameter, fainter by the ratio of
+    // the areas, so the ink it leaves follows its area (pointSdfEdges, pointInkFactor)
+    v_ink = 1.0;
+    if (outer > 0.0 && outer < ${POINT_MIN_OUTER_PX.toFixed(1)}) {
+        float grow = ${POINT_MIN_OUTER_PX.toFixed(1)} / outer;
+        v_ink = 1.0 / (grow * grow);
+        radius *= grow;
+        outer = ${POINT_MIN_OUTER_PX.toFixed(1)};
+    }
     // The billboard is sized as the outer radius plus the antialiasing padding
     // (so that the edge is not clipped)
     vec2 offsetPx = a_quad * (outer + ${POINT_AA_PADDING_PX.toFixed(1)});
@@ -357,6 +402,7 @@ flat in vec4 v_stroke_color;
 in vec2 v_offset_px;
 flat in float v_radius_px;
 flat in float v_outer_px;
+flat in float v_ink;          // the factor of a point below one pixel (1 otherwise)
 uniform float u_opacity;      // opacity factor at draw time (default 1)
 uniform float u_shape;        // shape (0 = circle, 1 = square, 2 = triangle, 3 = star)
 out vec4 fragColor;
@@ -384,7 +430,7 @@ void main() {
     vec4 color = mix(v_stroke_color, v_fill_color, fillMix);
 
     // Blending is non-premultiplied, so the factors are applied to the alpha only
-    fragColor = vec4(color.rgb, color.a * u_opacity * coverage);
+    fragColor = vec4(color.rgb, color.a * u_opacity * coverage * v_ink);
 }`;
         return createProgram(this.gl, vertexSource, fragmentSource);
     }

package/dist/view/renderers/polygon/sdf-polygon.js

@@ -376,6 +376,10 @@ void main() {
         float lineWidth = (strokeWidth >= 0.0
             ? strokeWidth * pow(2.0, u_zoom - createdZoom)
             : -strokeWidth) * u_size_scale;
+        // Below one pixel the outline is drawn one pixel wide and fainter by its width, so the
+        // ink per unit of length follows the width and goes to nothing with it
+        float ink = clamp(lineWidth, 0.0, 1.0);
+        lineWidth = max(lineWidth, 1.0);
         float halfWidth = lineWidth / 2.0;
 
         // Expand by 1 pixel for HHAA
@@ -389,7 +393,7 @@ void main() {
         vec2 finalNdc = (finalScreenPos / u_viewport) * 2.0 - 1.0;
         gl_Position = vec4(finalNdc * clipPos.w, clipPos.z, clipPos.w);
 
-        v_color = a_color;
+        v_color = vec4(a_color.rgb, a_color.a * ink);
         v_type = 1.0;
         v_dist = a_side * expandedHalfWidth;
         v_halfWidth = halfWidth;

package/dist/view/terrain/drape/renderer.js

@@ -207,6 +207,15 @@ float dashDistance(vec2 sa, vec2 sb, float start, float len, float dash, float p
     return best;
 }
 
+// The coverage of an outline of a half width at a screen distance from it. Below one
+// pixel of width the outline is drawn one pixel wide and fainter by its width, so the ink
+// per unit of length follows the width and goes to nothing with it (the rule of the
+// vertex path's line and outline shaders)
+float strokeCoverage(float halfWidth, float dist) {
+    float ink = clamp(2.0 * halfWidth, 0.0, 1.0);
+    return clamp(max(halfWidth, 0.5) + 0.5 - dist, 0.0, 1.0) * ink;
+}
+
 // Compose on top (premultiplied alpha)
 vec4 over(vec4 below, vec3 rgb, float a) {
     return vec4(rgb * a + below.rgb * (1.0 - a), a + below.a * (1.0 - a));
@@ -342,7 +351,7 @@ void main() {
         }
 
         if (paints && halfWidth > 0.0 && stroke.a > 0.0) {
-            float coverage = clamp(halfWidth + 0.5 - strokeDist, 0.0, 1.0);
+            float coverage = strokeCoverage(halfWidth, strokeDist);
             if (coverage > 0.0) acc = over(acc, stroke.rgb, stroke.a * coverage * factors.x);
         }
 
@@ -367,7 +376,7 @@ void main() {
             // for features that have no outline (the same as the immediate mode), and
             // it is solid under a dashed outline too
             float selHalf = halfWidth + u_selection_stroke_extra * 0.5;
-            selStroke = max(selStroke, clamp(selHalf + 0.5 - minDist, 0.0, 1.0) * factors.x);
+            selStroke = max(selStroke, strokeCoverage(selHalf, minDist) * factors.x);
         }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakuzu/maplibre-gl-draw",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "WebGL2 drawing and editing engine for MapLibre GL JS: points, lines, and polygons rendered in a custom layer, with selection, hit testing, and geometry utilities.",
   "keywords": [
     "maplibre",