@sakuzu/maplibre-gl-draw 1.0.0

package/dist/view/ui/helper.js

@@ -0,0 +1,76 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { computeBoundingBox, computeCombinedBoundingBox, hasZeroArea, } from './selection-ui/index.js';
+/**
+ * Returns the ids of the features the current selection covers, resolving a group or layer
+ * selection into its member features.
+ *
+ * The SSoT of the selection carries a kind (feature / group / layer). Selection display and
+ * manipulation on the map happen per feature, so a group / layer selection is resolved into
+ * the feature IDs of its members. This makes it "the SSoT holds a group/layer selection ->
+ * the map selects those members", so the display follows the SSoT (feature stays as is).
+ *
+ * @param store The Store to read the selection from
+ * @returns The feature ids. An empty array when nothing is selected
+ */
+export function getSelectedFeatureIds(store) {
+    const selection = store.getSelection();
+    switch (selection.type) {
+        case 'feature':
+            return selection.ids;
+        case 'group':
+            return selection.ids.flatMap((id) => store.getGroup(id)?.featureIds ?? []);
+        case 'layer':
+            return selection.ids.flatMap((id) => featureIdsInLayer(store, id));
+        default:
+            return [];
+    }
+}
+// All feature IDs under a layer (the features in order + the members of the groups).
+function featureIdsInLayer(store, layerId) {
+    const layer = store.getLayer(layerId);
+    if (!layer)
+        return [];
+    const ids = [];
+    for (const itemId of layer.order) {
+        if (store.getFeature(itemId)) {
+            ids.push(itemId);
+        }
+        else {
+            const group = store.getGroup(itemId);
+            if (group)
+                ids.push(...group.featureIds);
+        }
+    }
+    return ids;
+}
+/**
+ * Obtain the selected features (a group / layer selection is resolved to its members)
+ *
+ * @internal
+ */
+export function getSelectedFeatures(store) {
+    return getSelectedFeatureIds(store)
+        .map((id) => store.getFeature(id))
+        .filter((f) => f !== undefined);
+}
+/**
+ * Compute the bounding box from the selected features
+ * When there are features other than Point, the bbox is computed from those alone
+ *
+ * @internal
+ */
+export function computeSelectionBoundingBox(selectedFeatures, extensions) {
+    if (selectedFeatures.length === 0) {
+        return null;
+    }
+    // Exclude features with zero area (a single coordinate)
+    const nonPointFeatures = selectedFeatures.filter((f) => {
+        const bbox = computeBoundingBox(f, extensions);
+        return bbox !== null && !hasZeroArea(bbox);
+    });
+    if (nonPointFeatures.length > 0) {
+        return computeCombinedBoundingBox(nonPointFeatures, extensions);
+    }
+    return computeCombinedBoundingBox(selectedFeatures, extensions);
+}

package/dist/view/ui/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * UI Rendering module
+ *
+ * Responsible for drawing the selection UI, bounding boxes, handles and tentative state.
+ */
+export { BoxSelectionRenderer } from './box-selection.js';
+export type { HandleHitResult } from './handle-test.js';
+export { getCursorForHandle, hitTestGlobalAuxiliaryHandles, hitTestHandles, } from './handle-test.js';
+export type { HandleInfo } from './handles.js';
+export { computeMidpointHandles, computeResizeHandles, computeRotateHandle, computeVertexHandles, SelectionHandlesRenderer, } from './handles.js';
+export { computeSelectionBoundingBox, getSelectedFeatureIds, getSelectedFeatures, } from './helper.js';
+export type { AdditionalHandleInfo, AdditionalResizeHandlesCalculator, BoundingBoxCoords, CustomBoundingBoxCalculator, CustomResizeCalculator, PointFrameExtent, PointFrameExtentProvider, ResizeStrategy, SelectionExtensionRegistry, } from './selection-ui/index.js';
+export { computeBoundingBox, computeCombinedBoundingBox, createSelectionExtensionRegistry, DEFAULT_POINT_FRAME_SIZE, rotateBoundingBox, SelectionUIRenderer, } from './selection-ui/index.js';
+export type { TentativeRendererDeps } from './tentative.js';
+export { TentativeRenderer } from './tentative.js';

package/dist/view/ui/index.js

@@ -0,0 +1,15 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * UI Rendering module
+ *
+ * Responsible for drawing the selection UI, bounding boxes, handles and tentative state.
+ */
+// Drawing the box selection
+export { BoxSelectionRenderer } from './box-selection.js';
+export { getCursorForHandle, hitTestGlobalAuxiliaryHandles, hitTestHandles, } from './handle-test.js';
+export { computeMidpointHandles, computeResizeHandles, computeRotateHandle, computeVertexHandles, SelectionHandlesRenderer, } from './handles.js';
+// Helpers for the selection information
+export { computeSelectionBoundingBox, getSelectedFeatureIds, getSelectedFeatures, } from './helper.js';
+export { computeBoundingBox, computeCombinedBoundingBox, createSelectionExtensionRegistry, DEFAULT_POINT_FRAME_SIZE, rotateBoundingBox, SelectionUIRenderer, } from './selection-ui/index.js';
+export { TentativeRenderer } from './tentative.js';

package/dist/view/ui/selection-scope.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The selection scope of one draw instance
+ *
+ * What the selection UI (drawn by the CustomLayer) and the handle hit testing (run by the modes)
+ * must share: the extension points of the custom feature types, the registered auxiliary
+ * handles and the cache of the thinned handles. It is created once per draw instance and handed
+ * to both sides, so two instances on the same page never see each other's registrations or
+ * cached handle sets.
+ */
+import { type AuxiliaryHandleRegistry } from './auxiliary-handles.js';
+import { type SelectionExtensionRegistry } from './selection-ui/extension-registry.js';
+/**
+ * The registries the selection UI and the handle hit testing of one draw instance share:
+ * the selection extension points of custom feature types and the auxiliary handle providers.
+ *
+ * A mode reaches it as {@link ModeContext.selectionScope}.
+ */
+export interface SelectionScope {
+    /** Bounding box / resize / point frame extension points of the custom feature types */
+    readonly extensions: SelectionExtensionRegistry;
+    /** Providers of the auxiliary handles */
+    readonly auxiliaryHandles: AuxiliaryHandleRegistry;
+    /** Clears every registration and cached set (called when the draw instance is destroyed) */
+    clear(): void;
+}

package/dist/view/ui/selection-scope.js

@@ -0,0 +1,34 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * The selection scope of one draw instance
+ *
+ * What the selection UI (drawn by the CustomLayer) and the handle hit testing (run by the modes)
+ * must share: the extension points of the custom feature types, the registered auxiliary
+ * handles and the cache of the thinned handles. It is created once per draw instance and handed
+ * to both sides, so two instances on the same page never see each other's registrations or
+ * cached handle sets.
+ */
+import { createAuxiliaryHandleRegistry, } from './auxiliary-handles.js';
+import { HandleThinningCache } from './handle-thinning.js';
+import { createSelectionExtensionRegistry, } from './selection-ui/extension-registry.js';
+/**
+ * Creates the selection scope of one draw instance
+ *
+ * @internal
+ */
+export function createSelectionScope() {
+    const extensions = createSelectionExtensionRegistry();
+    const auxiliaryHandles = createAuxiliaryHandleRegistry();
+    const thinning = new HandleThinningCache();
+    return {
+        extensions,
+        auxiliaryHandles,
+        thinning,
+        clear() {
+            extensions.clear();
+            auxiliaryHandles.clear();
+            thinning.clear();
+        },
+    };
+}

package/dist/view/ui/selection-ui/bounding-box.d.ts

@@ -0,0 +1,44 @@
+import type { Coordinate, Feature } from '../../../store/types.js';
+import type { SelectionExtensionRegistry } from './extension-registry.js';
+import type { BoundingBoxCoords } from './types.js';
+/**
+ * Determines whether a selection box has no area, that is whether both ends of its diagonal
+ * are the same coordinate (a Point).
+ *
+ * @param bbox The corners of the box in degrees
+ * @returns `true` when the top-left and bottom-right corners are exactly equal
+ */
+export declare function hasZeroArea(bbox: BoundingBoxCoords): boolean;
+/**
+ * Computes the selection box of a feature: its four corners and its center in degrees.
+ *
+ * A Point gives a box with no area at its position, a Circle the box of the circle, an
+ * Image an oriented box that takes the rotation into account, and the other built-in types
+ * the axis-aligned box of their coordinates.
+ * A custom feature uses the calculator registered in the draw instance's registry. Without a
+ * registry only the standard feature types are known (a custom type falls back to the
+ * extent of its coordinates).
+ *
+ * @param feature The feature
+ * @param extensions The selection extension points of the draw instance, for custom types
+ * @returns The box, or `null` when the feature has no coordinates to measure
+ */
+export declare function computeBoundingBox(feature: Feature, extensions?: SelectionExtensionRegistry): BoundingBoxCoords | null;
+/**
+ * Compute the combined BoundingBox of several features
+ *
+ * A single feature returns its OBB as is. Several features return an AABB that contains
+ * all the vertices.
+ */
+export declare function computeCombinedBoundingBox(features: Feature[], extensions?: SelectionExtensionRegistry): BoundingBoxCoords | null;
+/**
+ * Rotate a BoundingBox around its center
+ *
+ * Rotates in Web Mercator, the same plane and angle convention as the rotate operation
+ * (operations/rotate.ts), so the frame drawn during a rotation drag stays on the corners of
+ * the rotated feature at any latitude and size.
+ *
+ * @param angle Rotation (radians, counterclockwise in the transform plane)
+ * @param rotationCenter The center of the rotation. The frame's own center when omitted
+ */
+export declare function rotateBoundingBox(bbox: BoundingBoxCoords, angle: number, rotationCenter?: Coordinate): BoundingBoxCoords;

package/dist/view/ui/selection-ui/bounding-box.js

@@ -0,0 +1,240 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * BoundingBox computation and rendering
+ *
+ * Provides the functions that compute BoundingBoxCoords from a feature, and the function
+ * that draws a BoundingBox with StrokeRenderer.
+ *
+ * Image (an OBB that takes the rotation into account) is computed by computeOrientedBoundingBox,
+ * and custom features use the calculator registered in the draw instance's
+ * SelectionExtensionRegistry.
+ */
+import { circleBoundingBox } from '../../../geometry/circle.js';
+import { pixelsToDegreesLat, pixelsToDegreesLng } from '../../../shared/math/index.js';
+import { fromPlane, toPlane } from '../../../shared/math/mercator-plane.js';
+import { getCircleRadius, getCreatedZoom, getImageProperties, } from '../../../shared/utils/property.js';
+import { getBoundingBox } from '../../../store/spatial/index.js';
+/**
+ * Determines whether a selection box has no area, that is whether both ends of its diagonal
+ * are the same coordinate (a Point).
+ *
+ * @param bbox The corners of the box in degrees
+ * @returns `true` when the top-left and bottom-right corners are exactly equal
+ */
+export function hasZeroArea(bbox) {
+    return bbox.topLeft[0] === bbox.bottomRight[0] && bbox.topLeft[1] === bbox.bottomRight[1];
+}
+/**
+ * Computes the selection box of a feature: its four corners and its center in degrees.
+ *
+ * A Point gives a box with no area at its position, a Circle the box of the circle, an
+ * Image an oriented box that takes the rotation into account, and the other built-in types
+ * the axis-aligned box of their coordinates.
+ * A custom feature uses the calculator registered in the draw instance's registry. Without a
+ * registry only the standard feature types are known (a custom type falls back to the
+ * extent of its coordinates).
+ *
+ * @param feature The feature
+ * @param extensions The selection extension points of the draw instance, for custom types
+ * @returns The box, or `null` when the feature has no coordinates to measure
+ */
+export function computeBoundingBox(feature, extensions) {
+    const customCalculator = extensions?.getBoundingBoxCalculator(feature.type);
+    if (customCalculator && extensions) {
+        return customCalculator(feature, extensions.getTileSize());
+    }
+    if (feature.type === 'Point') {
+        const coord = feature.coordinates;
+        return {
+            topLeft: coord,
+            topRight: coord,
+            bottomRight: coord,
+            bottomLeft: coord,
+            center: coord,
+        };
+    }
+    if (feature.type === 'Image') {
+        return computeOrientedBoundingBox(feature);
+    }
+    if (feature.type === 'Circle') {
+        return computeCircleBoundingBox(feature);
+    }
+    // LineString / Polygon / the Multi kinds compute an AABB
+    // (for the Multi kinds getBoundingBox flattens all the parts, so this is their union as is)
+    const bounds = getBoundingBox(feature);
+    if (bounds.minX === 0 && bounds.minY === 0 && bounds.maxX === 0 && bounds.maxY === 0) {
+        return null;
+    }
+    const centerLng = (bounds.minX + bounds.maxX) / 2;
+    const centerLat = (bounds.minY + bounds.maxY) / 2;
+    return {
+        topLeft: [bounds.minX, bounds.maxY],
+        topRight: [bounds.maxX, bounds.maxY],
+        bottomRight: [bounds.maxX, bounds.minY],
+        bottomLeft: [bounds.minX, bounds.minY],
+        center: [centerLng, centerLat],
+    };
+}
+/**
+ * The frame of a Circle: the extent of the geodesic circle as it is drawn, around its center
+ */
+function computeCircleBoundingBox(feature) {
+    const center = feature.coordinates;
+    const radiusMeters = getCircleRadius(feature);
+    const extent = radiusMeters && radiusMeters > 0 ? circleBoundingBox(center, radiusMeters) : null;
+    if (!extent) {
+        return {
+            topLeft: center,
+            topRight: center,
+            bottomRight: center,
+            bottomLeft: center,
+            center,
+        };
+    }
+    const [west, south, east, north] = extent;
+    return {
+        topLeft: [west, north],
+        topRight: [east, north],
+        bottomRight: [east, south],
+        bottomLeft: [west, south],
+        center,
+    };
+}
+/**
+ * Compute the OBB (Oriented Bounding Box) of an Image, taking the rotation into account
+ *
+ * Applies a planar rotation with a latitude correction instead of a spherical rotation
+ * (the same method as computeQuadVertices in quad-shader.ts).
+ */
+function computeOrientedBoundingBox(feature) {
+    const coord = feature.coordinates;
+    const [lng, lat] = coord;
+    const tileSize = 512;
+    const props = getImageProperties(feature);
+    const style = feature.style;
+    const imageWidth = style?.width || props.imageWidth || 100;
+    const imageHeight = style?.height || props.imageHeight || 100;
+    const scale = props.scale ?? 1;
+    // getImageProperties().createdZoom returns 0 when it is missing, so ?? does not work.
+    // getCreatedZoom(number|undefined) is used so that 14 is the default when it is missing.
+    const createdZoom = getCreatedZoom(feature) ?? 14;
+    // Only props.rotation is used (the same as ImageRenderer)
+    const rotation = props.rotation ?? 0;
+    const displayWidth = imageWidth * scale;
+    const displayHeight = imageHeight * scale;
+    const halfWidthDeg = pixelsToDegreesLng(displayWidth / 2, lat, createdZoom, tileSize);
+    const halfHeightDeg = pixelsToDegreesLat(displayHeight / 2, lat, createdZoom, tileSize);
+    const rotationRad = (rotation * Math.PI) / 180;
+    const cos = Math.cos(rotationRad);
+    const sin = Math.sin(rotationRad);
+    const latCos = Math.cos((lat * Math.PI) / 180);
+    // Normalize to the latitude degree scale
+    let hwNorm = halfWidthDeg * latCos;
+    let hhNorm = halfHeightDeg;
+    // Determine the scale factor from the latitude offset after the rotation
+    const MAX_LATITUDE = 89.9;
+    const baseCorners = [
+        { x: -hwNorm, y: hhNorm },
+        { x: hwNorm, y: hhNorm },
+        { x: hwNorm, y: -hhNorm },
+        { x: -hwNorm, y: -hhNorm },
+    ];
+    let maxLatOffset = 0;
+    for (const c of baseCorners) {
+        const ry = c.x * sin + c.y * cos;
+        maxLatOffset = Math.max(maxLatOffset, Math.abs(ry));
+    }
+    const maxAllowedOffset = MAX_LATITUDE - Math.abs(lat);
+    if (maxLatOffset > maxAllowedOffset && maxLatOffset > 0) {
+        const scaleFactor = maxAllowedOffset / maxLatOffset;
+        hwNorm *= scaleFactor;
+        hhNorm *= scaleFactor;
+    }
+    const localCorners = [
+        { x: -hwNorm, y: hhNorm }, // top-left
+        { x: hwNorm, y: hhNorm }, // top-right
+        { x: hwNorm, y: -hhNorm }, // bottom-right
+        { x: -hwNorm, y: -hhNorm }, // bottom-left
+    ];
+    const rotatedCorners = localCorners.map((c) => {
+        const rx = c.x * cos - c.y * sin;
+        const ry = c.x * sin + c.y * cos;
+        return [lng + rx / latCos, lat + ry];
+    });
+    return {
+        topLeft: rotatedCorners[0],
+        topRight: rotatedCorners[1],
+        bottomRight: rotatedCorners[2],
+        bottomLeft: rotatedCorners[3],
+        center: coord,
+    };
+}
+/**
+ * Compute the combined BoundingBox of several features
+ *
+ * A single feature returns its OBB as is. Several features return an AABB that contains
+ * all the vertices.
+ */
+export function computeCombinedBoundingBox(features, extensions) {
+    if (features.length === 0)
+        return null;
+    if (features.length === 1)
+        return computeBoundingBox(features[0], extensions);
+    let minLng = Number.POSITIVE_INFINITY;
+    let maxLng = Number.NEGATIVE_INFINITY;
+    let minLat = Number.POSITIVE_INFINITY;
+    let maxLat = Number.NEGATIVE_INFINITY;
+    for (const feature of features) {
+        const bbox = computeBoundingBox(feature, extensions);
+        if (!bbox)
+            continue;
+        const corners = [bbox.topLeft, bbox.topRight, bbox.bottomRight, bbox.bottomLeft];
+        for (const corner of corners) {
+            minLng = Math.min(minLng, corner[0]);
+            maxLng = Math.max(maxLng, corner[0]);
+            minLat = Math.min(minLat, corner[1]);
+            maxLat = Math.max(maxLat, corner[1]);
+        }
+    }
+    if (!Number.isFinite(minLng))
+        return null;
+    const centerLng = (minLng + maxLng) / 2;
+    const centerLat = (minLat + maxLat) / 2;
+    return {
+        topLeft: [minLng, maxLat],
+        topRight: [maxLng, maxLat],
+        bottomRight: [maxLng, minLat],
+        bottomLeft: [minLng, minLat],
+        center: [centerLng, centerLat],
+    };
+}
+/**
+ * Rotate a BoundingBox around its center
+ *
+ * Rotates in Web Mercator, the same plane and angle convention as the rotate operation
+ * (operations/rotate.ts), so the frame drawn during a rotation drag stays on the corners of
+ * the rotated feature at any latitude and size.
+ *
+ * @param angle Rotation (radians, counterclockwise in the transform plane)
+ * @param rotationCenter The center of the rotation. The frame's own center when omitted
+ */
+export function rotateBoundingBox(bbox, angle, rotationCenter) {
+    const center = rotationCenter ?? bbox.center;
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const [cx, cy] = toPlane(center);
+    const rotatePoint = (coord) => {
+        const [x, y] = toPlane(coord);
+        const dx = x - cx;
+        const dy = y - cy;
+        return fromPlane(cx + dx * cos - dy * sin, cy + dx * sin + dy * cos);
+    };
+    return {
+        topLeft: rotatePoint(bbox.topLeft),
+        topRight: rotatePoint(bbox.topRight),
+        bottomRight: rotatePoint(bbox.bottomRight),
+        bottomLeft: rotatePoint(bbox.bottomLeft),
+        center: rotatePoint(bbox.center),
+    };
+}

package/dist/view/ui/selection-ui/extension-registry.d.ts

@@ -0,0 +1,76 @@
+/**
+ * The registry of the Selection UI extension points
+ *
+ * A mechanism for the custom feature types of extension implementations to provide their own
+ * boundingBox computation / resize handles / resize strategy / point frame extent.
+ *
+ * One registry belongs to one draw instance (it is created by createMapLibreGLDraw and handed
+ * to the CustomLayer, the modes and the extension API). Two draw instances on the same page
+ * never see each other's registrations, and destroying an instance clears its registry.
+ * The tile size of the instance's map is held here as well, because the custom bounding box
+ * calculators take it as an argument.
+ */
+import type { Feature } from '../../../store/types.js';
+import type { AdditionalResizeHandlesCalculator, CustomBoundingBoxCalculator, CustomResizeCalculator, PointFrameExtent, PointFrameExtentProvider, ResizeStrategy } from './types.js';
+/**
+ * The side of the square selection frame of a point, in CSS px: 12.
+ *
+ * The same value as DEFAULT_POINT_STYLE.size. Types with no registered extent become this
+ * square (the same look as the former fixed value).
+ */
+export declare const DEFAULT_POINT_FRAME_SIZE = 12;
+/**
+ * The Selection UI extension points of one draw instance
+ *
+ * Every register method returns a function that cancels the registration. Cancelling after
+ * the same type has been registered again does not remove the later registration.
+ */
+export interface SelectionExtensionRegistry {
+    /** Registers how the selection box of a feature type is computed */
+    registerBoundingBox(type: string, calculator: CustomBoundingBoxCalculator): () => void;
+    /** Returns the bounding box calculator of a type, or `undefined` */
+    getBoundingBoxCalculator(type: string): CustomBoundingBoxCalculator | undefined;
+    /** Registers the resize handles a feature type adds to the four corner handles */
+    registerAdditionalResizeHandles(type: string, calculator: AdditionalResizeHandlesCalculator): () => void;
+    /** Returns the additional resize handles calculator of a type, or `undefined` */
+    getAdditionalResizeHandlesCalculator(type: string): AdditionalResizeHandlesCalculator | undefined;
+    /** Registers how a feature type is resized, replacing the built-in computation */
+    registerCustomResize(type: string, calculator: CustomResizeCalculator): () => void;
+    /** Returns the custom resize calculator of a type, or `undefined` */
+    getCustomResizeCalculator(type: string): CustomResizeCalculator | undefined;
+    /** Registers whether a feature type resizes by its coordinates or by its scale */
+    registerResizeStrategy(type: string, strategy: ResizeStrategy): () => void;
+    /** Returns the resize strategy of a type, or `undefined` */
+    getResizeStrategy(type: string): ResizeStrategy | undefined;
+    /** Registers the size of the selection frame of a point-like feature type */
+    registerPointFrameExtent(type: string, provider: PointFrameExtentProvider): () => void;
+    /** Returns the point frame extent provider of a type, or `undefined` */
+    getPointFrameExtentProvider(type: string): PointFrameExtentProvider | undefined;
+    /**
+     * Resolve the half width and half height of the selection box of a zero-area point
+     *
+     * Types with no registration, types that return null and values that are not finite
+     * degrade to the default square (the frame is not broken while the actual size on the
+     * extension side is not yet determined).
+     */
+    resolvePointFrameExtent(feature: Feature): PointFrameExtent;
+    /** The tile size in px of the instance's map (passed to the custom bounding box calculators) */
+    getTileSize(): number;
+    /** Sets the tile size in px (the draw instance sets it from the map) */
+    setTileSize(tileSize: number): void;
+    /** Cancels every registration (called when the draw instance is destroyed) */
+    clear(): void;
+}
+/**
+ * Creates an empty {@link SelectionExtensionRegistry} with a tile size of 512 px, for testing a
+ * custom feature handler in isolation.
+ *
+ * @returns A new registry with no registration
+ */
+export declare function createSelectionExtensionRegistry(): SelectionExtensionRegistry;
+/**
+ * Resolve the extent of a point's selection box with an optional provider
+ *
+ * Without a registry (callers outside a draw instance) the default square is returned.
+ */
+export declare function resolvePointFrameExtentWith(provider: PointFrameExtentProvider | undefined, feature: Feature): PointFrameExtent;

package/dist/view/ui/selection-ui/extension-registry.js

@@ -0,0 +1,78 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * The side of the square selection frame of a point, in CSS px: 12.
+ *
+ * The same value as DEFAULT_POINT_STYLE.size. Types with no registered extent become this
+ * square (the same look as the former fixed value).
+ */
+export const DEFAULT_POINT_FRAME_SIZE = 12;
+/** The tile size used until the map reports its own (maplibre's default) */
+const DEFAULT_REGISTRY_TILE_SIZE = 512;
+/**
+ * A map whose registrations return a cancel function
+ */
+function registerIn(map, type, value) {
+    map.set(type, value);
+    return () => {
+        if (map.get(type) === value)
+            map.delete(type);
+    };
+}
+/**
+ * Creates an empty {@link SelectionExtensionRegistry} with a tile size of 512 px, for testing a
+ * custom feature handler in isolation.
+ *
+ * @returns A new registry with no registration
+ */
+export function createSelectionExtensionRegistry() {
+    const boundingBoxes = new Map();
+    const additionalHandles = new Map();
+    const customResizes = new Map();
+    const resizeStrategies = new Map();
+    const pointFrameExtents = new Map();
+    let tileSize = DEFAULT_REGISTRY_TILE_SIZE;
+    return {
+        registerBoundingBox: (type, calculator) => registerIn(boundingBoxes, type, calculator),
+        getBoundingBoxCalculator: (type) => boundingBoxes.get(type),
+        registerAdditionalResizeHandles: (type, calculator) => registerIn(additionalHandles, type, calculator),
+        getAdditionalResizeHandlesCalculator: (type) => additionalHandles.get(type),
+        registerCustomResize: (type, calculator) => registerIn(customResizes, type, calculator),
+        getCustomResizeCalculator: (type) => customResizes.get(type),
+        registerResizeStrategy: (type, strategy) => registerIn(resizeStrategies, type, strategy),
+        getResizeStrategy: (type) => resizeStrategies.get(type),
+        registerPointFrameExtent: (type, provider) => registerIn(pointFrameExtents, type, provider),
+        getPointFrameExtentProvider: (type) => pointFrameExtents.get(type),
+        resolvePointFrameExtent(feature) {
+            return resolvePointFrameExtentWith(pointFrameExtents.get(feature.type), feature);
+        },
+        getTileSize: () => tileSize,
+        setTileSize(value) {
+            tileSize = value;
+        },
+        clear() {
+            boundingBoxes.clear();
+            additionalHandles.clear();
+            customResizes.clear();
+            resizeStrategies.clear();
+            pointFrameExtents.clear();
+        },
+    };
+}
+/**
+ * Resolve the extent of a point's selection box with an optional provider
+ *
+ * Without a registry (callers outside a draw instance) the default square is returned.
+ */
+export function resolvePointFrameExtentWith(provider, feature) {
+    const extent = provider?.(feature);
+    if (!extent ||
+        !Number.isFinite(extent.halfWidth) ||
+        !Number.isFinite(extent.halfHeight) ||
+        extent.halfWidth < 0 ||
+        extent.halfHeight < 0) {
+        const half = DEFAULT_POINT_FRAME_SIZE / 2;
+        return { halfWidth: half, halfHeight: half };
+    }
+    return extent;
+}

package/dist/view/ui/selection-ui/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Selection UI module
+ *
+ * Visual feedback for the selection state (BoundingBox / custom calculators / Renderer).
+ * The files are split per feature, and this index is a barrel that re-exports their public
+ * symbols.
+ */
+export { computeBoundingBox, computeCombinedBoundingBox, hasZeroArea, rotateBoundingBox, } from './bounding-box.js';
+export type { SelectionExtensionRegistry } from './extension-registry.js';
+export { createSelectionExtensionRegistry, DEFAULT_POINT_FRAME_SIZE, resolvePointFrameExtentWith, } from './extension-registry.js';
+export { SelectionUIRenderer } from './renderer.js';
+export type { AdditionalHandleInfo, AdditionalResizeHandlesCalculator, BoundingBoxCoords, CustomBoundingBoxCalculator, CustomResizeCalculator, PointFrameExtent, PointFrameExtentProvider, ResizeStrategy, } from './types.js';

package/dist/view/ui/selection-ui/index.js

@@ -0,0 +1,12 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * Selection UI module
+ *
+ * Visual feedback for the selection state (BoundingBox / custom calculators / Renderer).
+ * The files are split per feature, and this index is a barrel that re-exports their public
+ * symbols.
+ */
+export { computeBoundingBox, computeCombinedBoundingBox, hasZeroArea, rotateBoundingBox, } from './bounding-box.js';
+export { createSelectionExtensionRegistry, DEFAULT_POINT_FRAME_SIZE, resolvePointFrameExtentWith, } from './extension-registry.js';
+export { SelectionUIRenderer } from './renderer.js';

package/dist/view/ui/selection-ui/renderer.d.ts

@@ -0,0 +1,29 @@
+/**
+ * SelectionUIRenderer
+ *
+ * Draws the visual feedback of the selection state (the BoundingBox + the OBB while rotating).
+ * The BoundingBox computation logic itself is separated into ./bounding-box.ts, and this
+ * file concentrates on orchestrating the rendering and the application of the margin.
+ */
+import type { ProjectionData } from 'maplibre-gl';
+import type { SelectionUIConfig } from '../../../shared/config/selection.js';
+import { type CoordinateTransform } from '../../../shared/math/index.js';
+import type { DragState, Feature } from '../../../store/types.js';
+import type { StrokeRenderer } from '../../renderers/stroke.js';
+import type { SelectionExtensionRegistry } from './extension-registry.js';
+import type { BoundingBoxCoords } from './types.js';
+export declare class SelectionUIRenderer {
+    #private;
+    constructor(strokeRenderer: StrokeRenderer, config: SelectionUIConfig, extensions: SelectionExtensionRegistry);
+    /** Compute the BoundingBox of a feature (also usable from outside) */
+    computeFeatureBoundingBox(feature: Feature): BoundingBoxCoords | null;
+    /** Compute the combined BoundingBox of several features (also usable from outside) */
+    computeCombinedFeatureBoundingBox(features: Feature[]): BoundingBoxCoords | null;
+    setTransform(transform: CoordinateTransform): void;
+    setProjectionData(projectionData: ProjectionData): void;
+    updateConfig(config: SelectionUIConfig): void;
+    /**
+     * Draw the UI of the selected features
+     */
+    draw(features: Feature[], zoom: number, dragState?: DragState | null): void;
+}