@sakuzu/maplibre-gl-draw 1.0.0 → 2.0.0

package/dist/api/impl/placement.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/api/impl/placement.js

@@ -0,0 +1,138 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { groupLocked, invalidInput, isRecord, layerLocked, notFound, optionalIndex, requireId, } from './shared.js';
+/**
+ * Checks a move target and looks up what it names
+ *
+ * @throws DrawError `invalid-input` for a target of the wrong shape, `not-found` for a layer
+ *   or a group that does not exist
+ * @internal
+ */
+export function resolveMoveTarget(store, to) {
+    if (!isRecord(to))
+        throw invalidInput('The target must be an object');
+    const hasLayer = 'layerId' in to;
+    const hasGroup = 'groupId' in to;
+    if (hasLayer === hasGroup) {
+        throw invalidInput('The target must have either layerId or groupId');
+    }
+    const index = optionalIndex(to.index);
+    if (hasLayer) {
+        const layerId = requireId(to.layerId, 'layerId');
+        const layer = store.getLayer(layerId);
+        if (!layer)
+            throw notFound('layer', layerId);
+        return { kind: 'layer', layer, index, locked: layerLocked(store, layer) };
+    }
+    if (to.groupId === null)
+        return { kind: 'ungroup', index, locked: false };
+    const groupId = requireId(to.groupId, 'groupId');
+    const group = store.getGroup(groupId);
+    if (!group)
+        throw notFound('group', groupId);
+    return { kind: 'group', group, index, locked: groupLocked(store, group) };
+}
+/** Inserts the IDs into the list at the index, or at the end when it is undefined */
+function insertAt(list, ids, index) {
+    const at = index === undefined ? list.length : Math.min(index, list.length);
+    list.splice(at, 0, ...ids);
+    return list;
+}
+/**
+ * Moves features to a target, in one transaction
+ *
+ * @param features The features, in stacking order
+ * @internal
+ */
+export function moveFeatures(store, features, target) {
+    const ids = features.map((feature) => feature.id);
+    const moved = new Set(ids);
+    store.transact(() => {
+        if (target.kind === 'layer') {
+            const layerId = target.layer.id;
+            for (const feature of features) {
+                if (feature.layerId !== layerId || feature.groupId !== undefined) {
+                    store.updateFeature(feature.id, { layerId, groupId: undefined });
+                }
+            }
+            const items = (store.getLayer(layerId)?.items ?? []).filter((id) => !moved.has(id));
+            store.updateLayer(layerId, { items: insertAt(items, ids, target.index) });
+            return;
+        }
+        if (target.kind === 'group') {
+            const { group } = target;
+            for (const feature of features) {
+                if (feature.groupId !== group.id) {
+                    store.updateFeature(feature.id, { layerId: group.layerId, groupId: group.id });
+                }
+            }
+            const featureIds = (store.getGroup(group.id)?.featureIds ?? []).filter((id) => !moved.has(id));
+            store.updateGroup(group.id, { featureIds: insertAt(featureIds, ids, target.index) });
+            return;
+        }
+        // Out of their groups: each feature stays in its layer
+        const byLayer = new Map();
+        for (const feature of features) {
+            const list = byLayer.get(feature.layerId) ?? [];
+            list.push(feature);
+            byLayer.set(feature.layerId, list);
+        }
+        for (const [layerId, inLayer] of byLayer) {
+            const before = [...(store.getLayer(layerId)?.items ?? [])];
+            const blocks = new Map();
+            for (const feature of inLayer) {
+                if (feature.groupId === undefined)
+                    continue;
+                const block = blocks.get(feature.groupId) ?? [];
+                block.push(feature.id);
+                blocks.set(feature.groupId, block);
+            }
+            for (const feature of inLayer) {
+                if (feature.groupId !== undefined)
+                    store.updateFeature(feature.id, { groupId: undefined });
+            }
+            let items;
+            if (target.index === undefined) {
+                // Just in front of their group, or in its place when it was left empty and deleted
+                items = [];
+                for (const itemId of before) {
+                    if (!blocks.has(itemId) || store.getGroup(itemId))
+                        items.push(itemId);
+                    items.push(...(blocks.get(itemId) ?? []));
+                }
+            }
+            else {
+                const layerIds = inLayer.map((feature) => feature.id);
+                const inThisLayer = new Set(layerIds);
+                items = (store.getLayer(layerId)?.items ?? []).filter((id) => !inThisLayer.has(id));
+                insertAt(items, layerIds, target.index);
+            }
+            store.updateLayer(layerId, { items });
+        }
+    });
+}
+/**
+ * Moves groups to a layer, in one transaction
+ *
+ * @param groups The groups, in stacking order
+ * @internal
+ */
+export function moveGroups(store, groups, layer, index) {
+    const ids = groups.map((group) => group.id);
+    const moved = new Set(ids);
+    store.transact(() => {
+        for (const group of groups) {
+            if (group.layerId === layer.id)
+                continue;
+            const source = store.getLayer(group.layerId);
+            if (source) {
+                store.updateLayer(source.id, { items: source.items.filter((id) => id !== group.id) });
+            }
+            for (const featureId of group.featureIds) {
+                store.updateFeature(featureId, { layerId: layer.id });
+            }
+        }
+        const items = (store.getLayer(layer.id)?.items ?? []).filter((id) => !moved.has(id));
+        store.updateLayer(layer.id, { items: insertAt(items, ids, index) });
+    });
+}

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

@@ -0,0 +1,13 @@
+import type { EngineOverlayRenderer } from '../../extension/renderers.js';
+import type { TerrainContext } from '../../view/terrain/context.js';
+import type { TerrainAnchors } from '../extension/context.js';
+/** What the adapters of the renderers read from the instance */
+export interface RenderAdapterDeps {
+    /** The terrain anchors of a terrain state */
+    anchors(terrain: TerrainContext): TerrainAnchors;
+}
+/** Where the overlays of the contract are put into the engine */
+export interface OverlayHost {
+    /** Adds a renderer of the engine; returns the function that removes it */
+    addOverlay(renderer: EngineOverlayRenderer): () => void;
+}

package/dist/api/impl/render-context.js

@@ -0,0 +1,272 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { toColor } from '../../shared/color.js';
+import { applyDrawBlendState } from '../../view/layer/blend.js';
+import { calculateOffsetUniforms } from '../../view/shaders/helpers.js';
+import { bindTerrainState } from '../../view/terrain/binding.js';
+// ============================================================================
+// Terrain anchors
+// ============================================================================
+/** The anchors of each terrain state, so that a frame does not build them again */
+const anchorsByTerrain = new WeakMap();
+/**
+ * The terrain anchors of the contract over the terrain state of an instance
+ *
+ * @internal
+ */
+export function terrainAnchorsOf(terrain, build) {
+    let anchors = anchorsByTerrain.get(terrain);
+    if (!anchors) {
+        anchors = build(terrain);
+        anchorsByTerrain.set(terrain, anchors);
+    }
+    return anchors;
+}
+// ============================================================================
+// The render context
+// ============================================================================
+/** The offsets of each projection matrix of a frame */
+const offsetsByMatrix = new WeakMap();
+function offsetOf(base) {
+    let offset = offsetsByMatrix.get(base.mainMatrixArray);
+    if (!offset) {
+        offset = calculateOffsetUniforms(base.centerLngLat, base.mainMatrixArray);
+        offsetsByMatrix.set(base.mainMatrixArray, offset);
+    }
+    return offset;
+}
+/** A position as the `[lng, lat]` pair the shared renderers take */
+function pair(position) {
+    return [position[0], position[1]];
+}
+/**
+ * Builds the render context of the contract for one draw call
+ *
+ * @param gl - The WebGL context the renderer was added with
+ * @param base - The context the engine gives its own renderers in this draw call
+ * @param anchors - The terrain anchors of the terrain state of `base`
+ * @internal
+ */
+export function createRenderContext(gl, base, projection, zoom, anchors) {
+    const line = {
+        draw(coordinates, style, options = {}) {
+            const coords = coordinates.map(pair);
+            const stroke = {
+                width: style.width,
+                color: toColor(style.color),
+                opacity: style.opacity,
+                lineStyle: style.lineStyle,
+                ...(style.dashArray !== undefined && { dashArray: style.dashArray }),
+            };
+            const common = {
+                widthUnit: options.widthUnit ?? 'pixels',
+                ...(options.createdZoom !== undefined && { createdZoom: options.createdZoom }),
+            };
+            if (options.closed) {
+                base.sdfLineRenderer.drawClosed(coords, stroke, common, zoom, projection);
+            }
+            else {
+                base.sdfLineRenderer.draw(coords, stroke, { ...common, closed: false }, zoom, projection);
+            }
+        },
+    };
+    const fill = {
+        draw(rings, style) {
+            const [r, g, b, a] = toColor(style.color);
+            base.fillShaderManager.drawPolygonRings(rings.map((ring) => ring.map(pair)), [r, g, b, a * style.opacity], projection, zoom);
+        },
+    };
+    const point = {
+        draw(position, style, options = {}) {
+            base.pointShapeRenderer.draw(pair(position), {
+                shape: style.shape,
+                size: style.size,
+                fillColor: toColor(style.fillColor),
+                fillOpacity: style.fillOpacity,
+                strokeColor: toColor(style.strokeColor),
+                strokeWidth: style.strokeWidth,
+                strokeOpacity: style.strokeOpacity,
+            }, zoom, undefined, options.elevationMeters);
+        },
+    };
+    const context = {
+        gl,
+        shader: base.shaderData,
+        offset: offsetOf(base),
+        projection,
+        zoom,
+        pixelRatio: base.pixelRatio,
+        opacity: base.opacity,
+        terrain: anchors,
+        line,
+        fill,
+        point,
+    };
+    // The building blocks of the second entry find the terrain state behind the context
+    bindTerrainState(context, base.terrain);
+    return context;
+}
+/**
+ * Remembers the last render context, so that the features drawn one after another in a frame
+ * share one
+ */
+function createContextCache(deps) {
+    let last = null;
+    return (gl, base, projection, zoom) => {
+        if (last &&
+            last.base === base &&
+            last.projection === projection &&
+            last.zoom === zoom &&
+            last.context.gl === gl) {
+            return last.context;
+        }
+        const context = createRenderContext(gl, base, projection, zoom, deps.anchors(base.terrain));
+        last = { base, projection, zoom, context };
+        return context;
+    };
+}
+/**
+ * The renderer of the engine that draws the features of a custom type through a renderer of
+ * the contract
+ *
+ * @internal
+ */
+export function adaptFeatureRenderer(type, renderer, deps) {
+    let attachment = null;
+    const contextFor = createContextCache(deps);
+    return {
+        name: type,
+        onAdd(gl, map) {
+            attachment = { map, gl };
+            renderer.onAdd(map, gl);
+        },
+        draw(feature, projectionData, zoom, context) {
+            if (!attachment)
+                return;
+            renderer.draw(feature, contextFor(attachment.gl, context, projectionData, zoom));
+        },
+        onRemove() {
+            if (!attachment)
+                return;
+            const { map, gl } = attachment;
+            attachment = null;
+            renderer.onRemove(map, gl);
+        },
+    };
+}
+/**
+ * The drawing of a companion through the contract, for one provider
+ *
+ * @internal
+ */
+export function createCompanionDrawer(deps, getGl) {
+    const contextFor = createContextCache(deps);
+    return (draw, feature, projectionData, zoom, context) => {
+        const gl = getGl();
+        if (!gl)
+            return;
+        draw(feature, contextFor(gl, context, projectionData, zoom));
+    };
+}
+/**
+ * Creates the overlays of the contract of one instance
+ *
+ * They are drawn by two renderers of the engine, added while at least one overlay exists: one
+ * draws `draw` of every overlay above the features and the selection, the other draws
+ * `drawForLayer` after each layer and `drawVertices` above everything. Within each, the overlays
+ * go by `order`, then by the order they were added.
+ *
+ * @internal
+ */
+export function createOverlayStack(host, deps) {
+    const overlays = [];
+    let seq = 0;
+    let attachment = null;
+    let removeRenderers = null;
+    const contextFor = createContextCache(deps);
+    const sorted = () => [...overlays]
+        .sort((a, b) => (a.overlay.order ?? 0) - (b.overlay.order ?? 0) || a.seq - b.seq)
+        .map((entry) => entry.overlay);
+    const each = (projectionData, zoom, context, call) => {
+        if (!attachment)
+            return;
+        const ctx = contextFor(attachment.gl, context, projectionData, zoom);
+        for (const overlay of sorted()) {
+            call(overlay, ctx);
+            applyDrawBlendState(attachment.gl);
+        }
+    };
+    const onAdd = (gl, map) => {
+        if (attachment)
+            return;
+        attachment = { gl, map };
+        for (const overlay of sorted())
+            overlay.onAdd(map, gl);
+    };
+    const onRemove = () => {
+        if (!attachment)
+            return;
+        const { map, gl } = attachment;
+        attachment = null;
+        for (const overlay of sorted())
+            overlay.onRemove(map, gl);
+    };
+    const above = {
+        name: 'extension-overlays',
+        order: 'overlay',
+        onAdd,
+        draw(projectionData, zoom, context) {
+            each(projectionData, zoom, context, (overlay, ctx) => overlay.draw(ctx));
+        },
+        onRemove,
+        hasPendingWork: () => overlays.some((entry) => entry.overlay.hasPendingWork?.() === true),
+    };
+    const perLayer = {
+        name: 'extension-overlays-per-layer',
+        order: 'overlay',
+        // The resources are created and released by the other renderer
+        onAdd() { },
+        draw() { },
+        onRemove() { },
+        drawForLayer(layerId, projectionData, zoom, context) {
+            each(projectionData, zoom, context, (overlay, ctx) => overlay.drawForLayer?.(layerId, ctx));
+        },
+        drawVertices(projectionData, zoom, context) {
+            each(projectionData, zoom, context, (overlay, ctx) => overlay.drawVertices?.(ctx));
+        },
+    };
+    return {
+        add(overlay) {
+            const entry = { overlay, seq: seq++ };
+            overlays.push(entry);
+            if (!removeRenderers) {
+                const removeAbove = host.addOverlay(above);
+                const removePerLayer = host.addOverlay(perLayer);
+                removeRenderers = () => {
+                    removePerLayer();
+                    removeAbove();
+                };
+            }
+            else if (attachment) {
+                overlay.onAdd(attachment.map, attachment.gl);
+            }
+            return () => {
+                const index = overlays.indexOf(entry);
+                if (index === -1)
+                    return;
+                if (overlays.length === 1 && removeRenderers) {
+                    // The last one goes with the renderers of the engine, which release it
+                    const remove = removeRenderers;
+                    removeRenderers = null;
+                    remove();
+                    overlays.splice(overlays.indexOf(entry), 1);
+                    return;
+                }
+                overlays.splice(index, 1);
+                if (attachment)
+                    overlay.onRemove(attachment.map, attachment.gl);
+            };
+        },
+        gl: () => attachment?.gl ?? null,
+    };
+}

package/dist/api/impl/rows.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/api/impl/rows.js

@@ -0,0 +1,46 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * A row of a dataset as a GeoJSON feature: its ID, its geometry (`null` for a row without
+ * one) and its properties, and its look under `style` when it has one
+ *
+ * @internal
+ */
+export function toDatasetRow(feature) {
+    const row = {
+        type: 'Feature',
+        id: feature.id,
+        geometry: hasGeometry(feature) ? feature.geometry : null,
+        properties: feature.properties ?? {},
+    };
+    if (feature.style && Object.keys(feature.style).length > 0)
+        row.style = feature.style;
+    return row;
+}
+/** Whether a row has a geometry (a row without one is kept as a hidden point at NaN) */
+function hasGeometry(feature) {
+    const { geometry } = feature;
+    if (feature.visible !== false || geometry.type !== 'Point')
+        return true;
+    return !Number.isNaN(geometry.coordinates[0]);
+}
+/**
+ * The range of a `BBox` (`[west, south, east, north]`, or with the heights
+ * `[west, south, low, east, north, high]`)
+ *
+ * @internal
+ */
+export function toBoundingBox(bbox) {
+    if (bbox.length === 6) {
+        return { minX: bbox[0], minY: bbox[1], maxX: bbox[3], maxY: bbox[4] };
+    }
+    return { minX: bbox[0], minY: bbox[1], maxX: bbox[2], maxY: bbox[3] };
+}
+/**
+ * A range as a `BBox`, `[west, south, east, north]`
+ *
+ * @internal
+ */
+export function toBBox(bounds) {
+    return [bounds.minX, bounds.minY, bounds.maxX, bounds.maxY];
+}

package/dist/api/impl/selection.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/api/impl/selection.js

@@ -0,0 +1,186 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * `draw.selection` and `draw.vertexSelection`: what this client has selected
+ */
+import { groupSelection, ungroupSelection } from '../../operations/layer-operations.js';
+import { deleteSelectedItems, deleteSelectedVertices, } from '../../operations/selection-operations.js';
+import { coordinatesOf, supportsVertexEditing } from '../../shared/utils/coordinates.js';
+import { isFeatureLocked } from '../../store/lock.js';
+import { listEveryFeatureInOrder } from '../../store/ordering.js';
+import { getItem, invalidInput, isRecord, isShown, notFound, requireId, requireIds, } from './shared.js';
+const SELECTION_TYPES = ['feature', 'group', 'layer'];
+/**
+ * Creates `draw.selection`
+ *
+ * The selection holds only what can be seen: an item that is hidden (by its visible flag, the
+ * one of its group or layer, or by this client) cannot be selected.
+ *
+ * @internal
+ */
+export function createSelection(deps, collections) {
+    const { store } = deps;
+    /** Throws unless every ID names an item of the type */
+    const requireItems = (type, ids) => {
+        const list = requireIds(ids);
+        for (const id of list) {
+            if (!getItem(store, type, id))
+                throw notFound(type, id);
+        }
+        return list;
+    };
+    return {
+        get: () => store.getSelection(),
+        set(type, ids) {
+            if (!SELECTION_TYPES.includes(type)) {
+                throw invalidInput('type must be feature, group or layer');
+            }
+            const selectable = requireItems(type, ids).filter((id) => isShown(store, type, id));
+            if (selectable.length === 0)
+                return false;
+            store.setSelection(type, selectable);
+            return true;
+        },
+        add(ids) {
+            const current = store.getSelection();
+            const list = requireIds(ids);
+            // With nothing selected, the type is the one of the first ID
+            const type = current.type ?? SELECTION_TYPES.find((t) => getItem(store, t, list[0] ?? ''));
+            if (type === undefined) {
+                if (list.length === 0)
+                    return false;
+                throw notFound('feature, group or layer', list[0]);
+            }
+            const added = requireItems(type, list).filter((id) => !current.ids.includes(id) && isShown(store, type, id));
+            if (added.length === 0)
+                return false;
+            store.setSelection(type, [...current.ids, ...added]);
+            return true;
+        },
+        remove(ids) {
+            const current = store.getSelection();
+            const removed = new Set(requireIds(ids).filter((id) => current.ids.includes(id)));
+            if (removed.size === 0)
+                return false;
+            const kept = current.ids.filter((id) => !removed.has(id));
+            store.setSelection(kept.length > 0 ? current.type : null, kept);
+            return true;
+        },
+        clear() {
+            store.setSelection(null, []);
+        },
+        features() {
+            const { type, ids } = store.getSelection();
+            if (type === 'feature') {
+                return ids
+                    .map((id) => store.getFeature(id))
+                    .filter((feature) => feature !== undefined);
+            }
+            if (type === null)
+                return [];
+            const wanted = new Set(ids);
+            const inside = (feature) => type === 'group'
+                ? feature.groupId !== undefined && wanted.has(feature.groupId)
+                : wanted.has(feature.layerId);
+            return listEveryFeatureInOrder(store).filter(inside);
+        },
+        delete() {
+            return deleteSelectedItems(store);
+        },
+        group() {
+            if (store.isReadOnly())
+                return null;
+            const id = groupSelection(store, deps.generateId, deps.autoNameGenerator);
+            return id === null ? null : (store.getGroup(id) ?? null);
+        },
+        ungroup() {
+            // The same operation as the ungroup shortcut
+            if (store.isReadOnly())
+                return false;
+            return ungroupSelection(store);
+        },
+        move(to) {
+            const { type, ids } = store.getSelection();
+            if (type === 'feature' && ids.length > 0)
+                return collections.features.moveMany(ids, to);
+            if (type === 'group' && ids.length > 0)
+                return collections.groups.moveMany(ids, to);
+            return false;
+        },
+    };
+}
+/**
+ * Creates `draw.vertexSelection`
+ *
+ * @internal
+ */
+export function createVertexSelection(deps) {
+    const { store } = deps;
+    return {
+        get: () => store.getVertexSelection(),
+        set(featureId, vertices) {
+            const id = requireId(featureId, 'featureId');
+            const feature = store.getFeature(id);
+            if (!feature)
+                throw notFound('feature', id);
+            if (!Array.isArray(vertices))
+                throw invalidInput('The vertices must be an array');
+            const refs = vertices.map((vertex) => {
+                if (!isVertexRef(vertex))
+                    throw invalidInput('A vertex must be { part?, ring, index }');
+                if (!vertexExists(feature, vertex)) {
+                    throw notFound('vertex', vertex);
+                }
+                return { ...vertex };
+            });
+            if (isFeatureLocked(feature, store))
+                return false;
+            store.setSelectedVertices(refs.length > 0 ? { featureId: id, vertices: refs } : null);
+            return true;
+        },
+        clear() {
+            store.setSelectedVertices(null);
+        },
+        delete() {
+            const selection = store.getVertexSelection();
+            if (!selection || selection.vertices.length === 0)
+                return false;
+            if (store.isReadOnly() || store.isInteractionLocked())
+                return false;
+            return deleteSelectedVertices(store, selection) > 0;
+        },
+    };
+}
+/** Whether the value has the shape of a vertex reference */
+function isVertexRef(value) {
+    if (!isRecord(value))
+        return false;
+    const isIndex = (v) => typeof v === 'number' && Number.isInteger(v) && v >= 0;
+    return ((value.part === undefined || isIndex(value.part)) && isIndex(value.ring) && isIndex(value.index));
+}
+/** Whether the vertex exists on the feature (the closing position of a ring is not a vertex) */
+function vertexExists(feature, ref) {
+    if (!supportsVertexEditing(feature.type))
+        return false;
+    const part = ref.part ?? 0;
+    const coordinates = coordinatesOf(feature);
+    const ringVertices = (ring) => Array.isArray(ring) ? Math.max(0, ring.length - 1) : 0;
+    switch (feature.geometry.type) {
+        case 'LineString':
+            return part === 0 && ref.ring === 0 && ref.index < coordinates.length;
+        case 'Polygon':
+            return part === 0 && ref.index < ringVertices(coordinates[ref.ring]);
+        case 'MultiPoint':
+            return ref.ring === 0 && ref.index === 0 && part < coordinates.length;
+        case 'MultiLineString': {
+            const line = coordinates[part];
+            return ref.ring === 0 && Array.isArray(line) && ref.index < line.length;
+        }
+        case 'MultiPolygon': {
+            const polygon = coordinates[part];
+            return Array.isArray(polygon) && ref.index < ringVertices(polygon[ref.ring]);
+        }
+        default:
+            return false;
+    }
+}