@sakuzu/maplibre-gl-draw 2.1.4 → 2.2.0

package/CHANGELOG.md

@@ -6,6 +6,37 @@ 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
@@ -1245,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakuzu/maplibre-gl-draw",
-  "version": "2.1.4",
+  "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",