@sakuzu/maplibre-gl-draw 1.0.0 → 2.0.0

package/dist/api/impl/document.js

@@ -0,0 +1,280 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { DrawError } from '../errors.js';
+import { insertGroup, prepareGroupShell } from './groups.js';
+import { isGeoJSONFeatureCollection, isNativeFormat } from './import-export/format-detection.js';
+import { exportGeoJSON } from './import-export/geojson-export.js';
+import { prepareGeoJSON } from './import-export/geojson-import.js';
+import { prepareImage } from './import-export/image-import.js';
+import { exportNative, prepareNative } from './import-export/native-format.js';
+import { insertLayer, prepareLayer } from './layers.js';
+import { invalidInput, isRecord, isTaken, notFound } from './shared.js';
+const GEOMETRY_TYPES = new Set([
+    'Point',
+    'LineString',
+    'Polygon',
+    'MultiPoint',
+    'MultiLineString',
+    'MultiPolygon',
+    'GeometryCollection',
+]);
+/** The source of the writes of a load, of every format, as its notification carries it */
+const LOAD_SOURCE = 'load';
+/** The keys of the group of the options of a load */
+const GROUP_KEYS = ['id', 'name', 'visible', 'locked'];
+/**
+ * Creates `draw.document`
+ *
+ * @param onLoaded - Called after each load that read something, with the result and the source
+ *   its writes carried
+ * @internal
+ */
+export function createDocument(deps, onLoaded) {
+    const { store } = deps;
+    /**
+     * Reads a source, or null when the document is read-only; every failure is a DrawError
+     *
+     * @param pending - The IDs the layers and groups of the same write take, added to
+     * @param createdLayers - The IDs of the layers the earlier items of the same write create,
+     *   added to: a later item may name one with `layerId`
+     */
+    const prepare = async (source, options, pending, createdLayers) => {
+        try {
+            return await read(source, options, pending, createdLayers);
+        }
+        catch (error) {
+            // Whatever went wrong, the promise rejects with a DrawError
+            throw asDrawError('invalid-input', error);
+        }
+    };
+    /**
+     * Writes the loads that were read in one transaction and announces each one, or returns
+     * null when the document became read-only while they were read
+     */
+    const writeAll = (prepared) => {
+        if (store.isReadOnly())
+            return null;
+        // An ID given to a new layer or group may have been taken while the sources were read;
+        // nothing may throw once the writing has started
+        for (const { layer, group } of prepared) {
+            for (const id of [layer?.layer.id, group?.id]) {
+                if (id !== undefined && isTaken(store, id)) {
+                    throw new DrawError('already-exists', `The ID ${JSON.stringify(id)} is already taken`, {
+                        id,
+                    });
+                }
+            }
+        }
+        const results = store.transact(() => prepared.map(writeItem), LOAD_SOURCE);
+        for (const result of results)
+            onLoaded?.(result, LOAD_SOURCE);
+        return results;
+    };
+    /** Writes one load: its new layer first, then its features, then the group of them */
+    const writeItem = ({ load, layer, group }) => {
+        if (layer)
+            insertLayer(store, layer);
+        const result = load.write();
+        if (layer)
+            result.layerId = layer.layer.id;
+        const first = store.getFeature(result.featureIds[0] ?? '');
+        if (group && first) {
+            // The features of a grouped load are all in one layer
+            const featureIds = result.featureIds.filter((id) => store.getFeature(id)?.layerId === first.layerId);
+            insertGroup(store, { ...group, layerId: first.layerId, featureIds });
+            result.groupId = group.id;
+        }
+        return result;
+    };
+    return {
+        async load(source, options) {
+            const prepared = await prepare(source, options, new Set(), new Set());
+            return prepared ? (writeAll([prepared])?.[0] ?? null) : null;
+        },
+        async loadMany(items) {
+            if (!Array.isArray(items))
+                throw invalidInput('The items must be an array');
+            for (const item of items) {
+                if (!isRecord(item) || !('source' in item)) {
+                    throw invalidInput('Each item must be an object with a source');
+                }
+            }
+            // Everything is read before anything is written, so a failure writes nothing
+            const prepared = [];
+            const pending = new Set();
+            const createdLayers = new Set();
+            for (const { source, options } of items) {
+                const item = await prepare(source, options, pending, createdLayers);
+                if (!item)
+                    return null;
+                prepared.push(item);
+            }
+            return writeAll(prepared);
+        },
+        toJSON: () => exportNative(store),
+        toGeoJSON: () => exportGeoJSON(store),
+    };
+    async function read(source, given, pending, createdLayers) {
+        const options = given ?? {};
+        if (!isRecord(options))
+            throw invalidInput('The options must be an object');
+        const mode = options.mode;
+        if (mode !== undefined && mode !== 'replace' && mode !== 'merge') {
+            throw invalidInput('mode must be replace or merge');
+        }
+        if (options.layer !== undefined && options.layerId !== undefined) {
+            throw invalidInput('layer and layerId cannot be given together');
+        }
+        // A layer an earlier item of the same write creates is known: it is written before this one
+        if (options.layerId !== undefined &&
+            !store.getLayer(options.layerId) &&
+            !createdLayers.has(options.layerId)) {
+            throw notFound('layer', options.layerId);
+        }
+        // The new layer and group take their IDs now, so that the items of one write differ
+        const layer = options.layer !== undefined ? prepareLayer(deps, options.layer, pending) : undefined;
+        if (layer) {
+            pending.add(layer.layer.id);
+            createdLayers.add(layer.layer.id);
+        }
+        const group = options.group !== undefined
+            ? prepareGroupShell(deps, options.group, GROUP_KEYS, pending)
+            : undefined;
+        if (group)
+            pending.add(group.id);
+        if (store.isReadOnly())
+            return null;
+        const load = await readLoad(source, options, layer?.layer.id ?? options.layerId, {
+            grouped: group !== undefined,
+            creates: layer !== undefined || group !== undefined,
+            reservedIds: pending,
+        });
+        return { load, layer, group };
+    }
+    /**
+     * Reads a source into a load of its format
+     *
+     * @param layerId - The layer every feature goes into: the one given, or the one the load
+     *   creates
+     */
+    async function readLoad(source, options, layerId, extra) {
+        const mode = options.mode;
+        const read = await readSource(source);
+        const importDeps = {
+            store,
+            autoNameGenerator: deps.autoNameGenerator,
+            generateFeatureId: deps.generateId,
+            // The layer of the options, unless another load of the same transaction removed it
+            getCurrentLayerId: () => layerId !== undefined && store.getLayer(layerId) ? layerId : deps.getActiveLayerId(),
+        };
+        if (read.kind === 'image') {
+            if (!options.coordinate)
+                throw invalidInput('An image needs the coordinate option');
+            const replace = mode === 'replace';
+            const prepared = await prepareImage(read.file, {
+                coordinate: options.coordinate,
+                zoom: options.zoom,
+                layerId,
+                flattenMulti: options.flattenMulti,
+            }, importDeps, 
+            // With replace, the features and groups go in the transaction that adds the image
+            replace ? () => deleteFeaturesAndGroups(store) : undefined);
+            if (!replace)
+                return prepared;
+            return { write: () => ({ ...prepared.write(), replaced: true }) };
+        }
+        const { data } = read;
+        if (isNativeFormat(data)) {
+            if (mode === 'merge') {
+                throw invalidInput('A document of the library can only replace the document');
+            }
+            if (extra.creates) {
+                throw invalidInput('A document of the library brings its own layers and groups');
+            }
+            try {
+                return await prepareNative(data, { store });
+            }
+            catch (error) {
+                throw asDrawError('invalid-input', error);
+            }
+        }
+        const collection = toFeatureCollection(data);
+        if (collection === null) {
+            throw new DrawError('unsupported-format', 'The source is neither a document of the library nor GeoJSON');
+        }
+        // The layer given to the load wins over the one a feature names; with replace, the
+        // features and groups are replaced in the transaction that writes the new ones
+        return prepareGeoJSON(collection, importDeps, {
+            flattenMulti: options.flattenMulti,
+            layerId,
+            replace: mode === 'replace',
+            oneGroup: extra.grouped,
+            reservedIds: extra.reservedIds,
+        });
+    }
+}
+/** Deletes every feature and group of the document, keeping the layers */
+function deleteFeaturesAndGroups(store) {
+    for (const feature of store.listFeatures())
+        store.deleteFeature(feature.id);
+    for (const group of store.listGroups())
+        store.deleteGroup(group.id);
+}
+/** Reads a file or a string into data, or keeps an image file as it is */
+async function readSource(source) {
+    if (typeof Blob !== 'undefined' && source instanceof Blob) {
+        const name = typeof File !== 'undefined' && source instanceof File ? source.name : '';
+        if (source.type.startsWith('image/')) {
+            const file = typeof File !== 'undefined' && source instanceof File
+                ? source
+                : new File([source], name || 'image', { type: source.type });
+            return { kind: 'image', file };
+        }
+        let text;
+        try {
+            text = await source.text();
+        }
+        catch (error) {
+            throw asDrawError('unsupported-format', error);
+        }
+        return { kind: 'data', data: parseJSON(text) };
+    }
+    if (typeof source === 'string')
+        return { kind: 'data', data: parseJSON(source) };
+    return { kind: 'data', data: source };
+}
+/** Parses JSON text; text that is not JSON cannot be read */
+function parseJSON(text) {
+    try {
+        return JSON.parse(text);
+    }
+    catch (error) {
+        throw asDrawError('unsupported-format', error);
+    }
+}
+/** A FeatureCollection from GeoJSON data (a collection, a feature or a geometry), or null */
+function toFeatureCollection(data) {
+    if (isGeoJSONFeatureCollection(data))
+        return data;
+    if (!isRecord(data))
+        return null;
+    if (data.type === 'Feature') {
+        return { type: 'FeatureCollection', features: [data] };
+    }
+    if (typeof data.type === 'string' && GEOMETRY_TYPES.has(data.type)) {
+        return {
+            type: 'FeatureCollection',
+            features: [
+                { type: 'Feature', properties: {}, geometry: data },
+            ],
+        };
+    }
+    return null;
+}
+/** Wraps an error of a reader into a DrawError with the code */
+function asDrawError(code, error) {
+    if (error instanceof DrawError)
+        return error;
+    const message = error instanceof Error ? error.message : String(error);
+    return new DrawError(code, message, { cause: error });
+}

package/dist/api/impl/drawing.js

@@ -0,0 +1,180 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { INITIAL_DRAPE_DEBUG } from '../../view/terrain/context.js';
+import { getTerrainDrapeDebug, getTerrainRenderState, INACTIVE_TERRAIN_STATE, } from '../../view/terrain/state.js';
+import { invalidInput } from './shared.js';
+/**
+ * `getLayerStack`, `hasPendingWork` and `debug` over the engine
+ *
+ * @internal
+ */
+export function createDrawing(engine) {
+    const { customLayer } = engine;
+    return {
+        getLayerStack() {
+            return Object.freeze(customLayer
+                .getStackSlots()
+                .map(({ layerId, from, to }) => Object.freeze({ layerId, from, to })));
+        },
+        hasPendingWork: () => customLayer.hasPendingWork(),
+        debug: {
+            terrain() {
+                const terrain = customLayer.getTerrainContext();
+                return Object.freeze({
+                    render: toRenderDiagnostics(terrain ? getTerrainRenderState(terrain) : INACTIVE_TERRAIN_STATE),
+                    drape: Object.freeze({
+                        ...(terrain ? getTerrainDrapeDebug(terrain) : INITIAL_DRAPE_DEBUG),
+                    }),
+                });
+            },
+        },
+    };
+}
+/** The plain numbers of a terrain state, without the GL objects and the internal plans */
+function toRenderDiagnostics(state) {
+    return Object.freeze({
+        active: state.active,
+        atlasRect: Object.freeze([
+            ...state.atlasRect,
+        ]),
+        atlasSize: Object.freeze([
+            ...state.atlasSize,
+        ]),
+        elevationScale: state.elevationScale,
+        liftMeters: state.liftMeters,
+        stepMeters: state.stepMeters,
+        stepGrid: state.stepGrid,
+        generation: state.generation,
+    });
+}
+// ============================================================================
+// draw.drawing
+// ============================================================================
+/** No modifier key held */
+const NO_MODIFIERS = Object.freeze({
+    shift: false,
+    ctrl: false,
+    alt: false,
+    meta: false,
+});
+/** Throws unless the value is a position of two finite numbers, and returns them */
+function requirePosition(value) {
+    if (!Array.isArray(value) ||
+        value.length < 2 ||
+        typeof value[0] !== 'number' ||
+        typeof value[1] !== 'number' ||
+        !Number.isFinite(value[0]) ||
+        !Number.isFinite(value[1])) {
+        throw invalidInput('The position must be [longitude, latitude] of finite numbers');
+    }
+    return [value[0], value[1]];
+}
+/** An event of the browser that has what a receiver reads, where the browser has none to make */
+function inertEvent(fields) {
+    return {
+        target: null,
+        currentTarget: null,
+        defaultPrevented: false,
+        isTrusted: false,
+        preventDefault() { },
+        stopPropagation() { },
+        stopImmediatePropagation() { },
+        ...fields,
+    };
+}
+/**
+ * The event of the browser a made pointer event carries: a `PointerEvent` (or a `MouseEvent`)
+ * where the browser can make one, otherwise an object with the same fields
+ */
+function makePointerOriginal(type, point, container) {
+    const rect = container?.getBoundingClientRect?.();
+    const init = {
+        clientX: (rect?.left ?? 0) + point.x,
+        clientY: (rect?.top ?? 0) + point.y,
+        button: 0,
+        buttons: 0,
+    };
+    const eventType = type === 'mousemove' ? 'pointermove' : type;
+    if (typeof PointerEvent === 'function') {
+        return new PointerEvent(eventType, { ...init, pointerType: 'mouse', isPrimary: true });
+    }
+    if (typeof MouseEvent === 'function')
+        return new MouseEvent(eventType, init);
+    return inertEvent({ type: eventType, ...init });
+}
+/** The event of the browser a made key event carries */
+function makeKeyOriginal(key) {
+    if (typeof KeyboardEvent === 'function')
+        return new KeyboardEvent('keydown', { key, code: key });
+    return inertEvent({ type: 'keydown', key, code: key, repeat: false });
+}
+/**
+ * `draw.drawing` over the engine: the input it makes goes through the router of the input,
+ * the same way as the input of the map
+ *
+ * @internal
+ */
+export function createDrawingResource(engine) {
+    const { map, modeManager, inputRouter } = engine;
+    const { store } = engine.context;
+    const isDrawing = () => store.getTentative() !== null;
+    const isActive = () => isDrawing() || modeManager.getHandler()?.writesFeatures === true;
+    const pointer = (type, [lng, lat]) => {
+        const projected = map.project([lng, lat]);
+        const point = { x: projected.x, y: projected.y };
+        const event = {
+            type,
+            point,
+            lngLat: { lng, lat },
+            originalEvent: makePointerOriginal(type, point, map.getContainer?.()),
+            modifiers: { ...NO_MODIFIERS },
+            pointerType: 'mouse',
+            // The position is used as it is: it is not snapped, and no click tolerance applies
+            snap: false,
+            programmatic: true,
+        };
+        return inputRouter.dispatch(event);
+    };
+    return {
+        isActive,
+        isDrawing,
+        addVertex(position) {
+            const at = requirePosition(position);
+            if (!isActive())
+                return false;
+            // A click comes after the pointer moved to where it clicks, and the modes read that move
+            // (a click on the closing vertex finishes the shape)
+            pointer('mousemove', at);
+            return pointer('click', at);
+        },
+        moveTo(position) {
+            const at = requirePosition(position);
+            if (!isActive())
+                return;
+            pointer('mousemove', at);
+        },
+        finish() {
+            if (!isDrawing())
+                return false;
+            const event = {
+                type: 'keydown',
+                key: 'Enter',
+                code: 'Enter',
+                modifiers: { ...NO_MODIFIERS },
+                originalEvent: makeKeyOriginal('Enter'),
+            };
+            return inputRouter.dispatch(event) && !isDrawing();
+        },
+        cancel() {
+            if (!isDrawing())
+                return false;
+            // The mode drops what it was drawing (onCancel of a mode of the contract)
+            modeManager.notifyStateReset();
+            if (store.getTentative() !== null)
+                store.setTentative(null);
+            return true;
+        },
+        undoVertex: () => modeManager.undoVertex(),
+        redoVertex: () => modeManager.redoVertex(),
+    };
+}

package/dist/api/impl/engine-context.d.ts

@@ -0,0 +1,7 @@
+import type { Mode } from '../../store/types.js';
+export declare const DEFAULT_OPTIONS: {
+    defaultMode: Mode;
+    clickTolerance: number;
+    dragThreshold: number;
+    scaleWithZoom: boolean;
+};

package/dist/api/{context.js → impl/engine-context.js}

@@ -1,35 +1,32 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
-import { createCoreBoxSelectionStrategies } from '../dispatcher/hit-test/box-strategies.js';
-import { BoxSelectionStrategyRegistry } from '../dispatcher/hit-test/box-strategy.js';
-import { createGlobeShapeResolver } from '../dispatcher/hit-test/globe-shape.js';
-import { HitTestServiceImpl } from '../dispatcher/hit-test/service.js';
-import { DEFAULT_HIT_TEST_OPTIONS } from '../dispatcher/hit-test/strategies/base.js';
-import { resolveMessages } from '../messages.js';
-import { ModeManagerImpl } from '../modes/manager.js';
-import { DEFAULT_FEATURE_STYLE_CONFIG, mergeFeatureStyleConfig, } from '../shared/config/feature-style.js';
-import { DEFAULT_RENDERING_CONFIG, mergeRenderingConfig } from '../shared/config/rendering.js';
-import { DEFAULT_SELECTION_CONFIG, mergeSelectionUIConfig } from '../shared/config/selection.js';
-import { DEFAULT_TOPOLOGY_CONFIG, mergeTopologyConfig } from '../shared/config/topology.js';
-import { DEFAULT_TRACE_CONFIG, mergeTraceConfig } from '../shared/config/trace.js';
-import { getAnchorProjector } from '../shared/math/index.js';
-import { EventEmitterImpl } from '../shared/utils/event-emitter.js';
-import { createId } from '../shared/utils/id.js';
-import { AutoNameGenerator } from '../shared/utils/name-generator.js';
-import { createPixelRatioSource } from '../shared/utils/pixel-ratio.js';
-import { createSnapTargetsRegistry } from '../snapping/custom-targets.js';
-import { createSnapService } from '../snapping/service.js';
-import { DEFAULT_SNAP_OPTIONS, resolveGuideStepDegrees, resolveSnapKinds, } from '../snapping/types.js';
-import { toStore } from '../store/draw-store.js';
-import { MemoryStore } from '../store/memory.js';
-import { StoreSpatialIndex } from '../store/spatial/store-spatial-index.js';
-import { resolveWritableLayerId } from '../store/writable-layer.js';
-import { createSelectionScope } from '../view/ui/selection-scope.js';
-/**
- * The default options
- *
- * @internal
- */
+import { createCoreBoxSelectionStrategies } from '../../dispatcher/hit-test/box-strategies.js';
+import { BoxSelectionStrategyRegistry } from '../../dispatcher/hit-test/box-strategy.js';
+import { createGlobeShapeResolver } from '../../dispatcher/hit-test/globe-shape.js';
+import { HitTestServiceImpl } from '../../dispatcher/hit-test/service.js';
+import { DEFAULT_HIT_TEST_OPTIONS } from '../../dispatcher/hit-test/strategies/base.js';
+import { resolveMessages } from '../../messages.js';
+import { ModeManagerImpl } from '../../modes/manager.js';
+import { DEFAULT_FEATURE_STYLE_CONFIG, mergeFeatureStyleConfig, } from '../../shared/config/feature-style.js';
+import { DEFAULT_RENDERING_CONFIG, mergeRenderingConfig } from '../../shared/config/rendering.js';
+import { DEFAULT_SELECTION_CONFIG, mergeSelectionUIConfig } from '../../shared/config/selection.js';
+import { DEFAULT_TOPOLOGY_CONFIG, mergeTopologyConfig } from '../../shared/config/topology.js';
+import { DEFAULT_TRACE_CONFIG, mergeTraceConfig } from '../../shared/config/trace.js';
+import { getAnchorProjector } from '../../shared/math/index.js';
+import { EventEmitterImpl } from '../../shared/utils/event-emitter.js';
+import { createId } from '../../shared/utils/id.js';
+import { AutoNameGenerator } from '../../shared/utils/name-generator.js';
+import { createPixelRatioSource } from '../../shared/utils/pixel-ratio.js';
+import { createSnapTargetsRegistry, } from '../../snapping/custom-targets.js';
+import { createSnapIndicatorLook } from '../../snapping/indicator.js';
+import { createSnapService } from '../../snapping/service.js';
+import { DEFAULT_SNAP_OPTIONS, resolveGuideStepDegrees, resolveSnapKinds, } from '../../snapping/types.js';
+import { toStore } from '../../store/draw-store.js';
+import { MemoryStore } from '../../store/memory.js';
+import { StoreSpatialIndex } from '../../store/spatial/store-spatial-index.js';
+import { resolveWritableLayerId } from '../../store/writable-layer.js';
+import { pointMarkerReachPx } from '../../view/renderers/point/point-style.js';
+import { createSelectionScope } from '../../view/ui/selection-scope.js';
 export const DEFAULT_OPTIONS = {
     defaultMode: 'select',
     // One default for the hit test and the topmost hit (see DEFAULT_HIT_TEST_OPTIONS)
@@ -64,10 +61,10 @@ export function createContext(map, options = {}) {
         ? mergeRenderingConfig(DEFAULT_RENDERING_CONFIG, options.renderingStyle)
         : DEFAULT_RENDERING_CONFIG;
     // Merge the topology configuration (everything is disabled by default). It is the actual
-    // object draw.topology rewrites, so always copy it so that the default object is not shared
+    // object the runtime options change, so always copy it so that the default is not shared
     const topology = mergeTopologyConfig(DEFAULT_TOPOLOGY_CONFIG, options.topology ?? {});
-    // Merge the trace configuration (it is enabled by default). It is the actual object
-    // draw.tracing rewrites, so always copy it so that the default object is not shared
+    // Merge the trace configuration (it is enabled by default). It is the actual object the
+    // runtime options change, so always copy it so that the default is not shared
     const trace = mergeTraceConfig(DEFAULT_TRACE_CONFIG, options.trace ?? {});
     // The internal components
     const store = options.store ? toStore(options.store) : new MemoryStore();
@@ -85,6 +82,9 @@ export function createContext(map, options = {}) {
         },
         // On the globe the edges are tested along the path they are drawn along
         drawnShape: createGlobeShapeResolver(map),
+        // A click on the marker of a point hits the point (the look of a point is read at each
+        // hit, so a change of the style option applies at once)
+        pointMarkerReachPx: (feature) => pointMarkerReachPx(feature.style, featureStyle.point.point),
     });
     // Create the BoxSelectionStrategyRegistry and register the core strategies
     const boxSelectionRegistry = new BoxSelectionStrategyRegistry();
@@ -98,8 +98,8 @@ export function createContext(map, options = {}) {
         canEnter: (handler) => !handler.writesFeatures || getWritableLayerId() !== '',
     });
     // Create the snapping service (enabled by default, tolerance 10px, temporarily disabled
-    // with Alt). The candidates come only from the built-in providers (the vertices and edges of
-    // the Store); external providers are added with draw.snapping.register().
+    // with Alt). The candidates come from the built-in providers (the vertices and edges of the
+    // Store); the snap providers of the extensions are added through the extension host.
     const snapOptions = {
         ...DEFAULT_SNAP_OPTIONS,
         ...options.snap,
@@ -108,7 +108,15 @@ export function createContext(map, options = {}) {
         guideStepDegrees: resolveGuideStepDegrees(options.snap?.guideStepDegrees),
     };
     // The registries of the extension points belong to this instance (nothing is module-level)
-    const selectionScope = createSelectionScope();
+    const selectionScope = createSelectionScope({
+        // The frame of a point spans its marker, as far as a click on it hits it (the reach of the
+        // built-in type, or of an override of it for the points it keeps): a plain point has a
+        // 16 px frame before the margin, and a larger marker a larger one
+        defaultPointFrameExtent: (feature) => {
+            const reach = hitTestService.getStrategy?.(feature.type)?.reachPx?.(feature) ?? 0;
+            return reach > 0 ? { halfWidth: reach, halfHeight: reach } : null;
+        },
+    });
     const snapTargets = createSnapTargetsRegistry();
     // The messages table belongs to this instance as well
     const messages = resolveMessages(options.messages);
@@ -132,7 +140,9 @@ export function createContext(map, options = {}) {
             visible: true,
             locked: false,
             opacity: 1.0,
-            order: [],
+            items: [],
+            styleRule: undefined,
+            metadata: undefined,
         };
         store.createLayer(defaultLayer);
         activeLayerId = 'default-layer';
@@ -152,7 +162,7 @@ export function createContext(map, options = {}) {
     const getActiveLayerId = () => {
         // If the active layer was deleted, make the first layer active
         if (!store.getLayer(activeLayerId)) {
-            const layers = store.getAllLayers();
+            const layers = store.listLayers();
             if (layers.length > 0) {
                 activeLayerId = layers[0].id;
             }
@@ -180,6 +190,7 @@ export function createContext(map, options = {}) {
         pixelRatioSource: createPixelRatioSource(options.pixelRatio, () => map.getPixelRatio()),
         snapOptions,
         snapService,
+        snapIndicator: createSnapIndicatorLook(),
         autoNameGenerator,
         boxSelectionRegistry,
         selectionScope,