@sakuzu/maplibre-gl-draw 1.0.0

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

@@ -0,0 +1,227 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _SelectionUIRenderer_instances, _SelectionUIRenderer_strokeRenderer, _SelectionUIRenderer_extensions, _SelectionUIRenderer_config, _SelectionUIRenderer_transform, _SelectionUIRenderer_projectionData, _SelectionUIRenderer_drawRotatingBoundingBox, _SelectionUIRenderer_drawIndividualBoundingBox, _SelectionUIRenderer_drawCombinedBoundingBox, _SelectionUIRenderer_drawBoundingBoxWithMargin, _SelectionUIRenderer_drawPointBoundingBox, _SelectionUIRenderer_applyMargin, _SelectionUIRenderer_strokeBoundingBox, _SelectionUIRenderer_strokePath;
+import { applyMarginToBoundingBox } from '../../../shared/math/index.js';
+import { computeBoundingBox, computeCombinedBoundingBox, hasZeroArea, rotateBoundingBox, } from './bounding-box.js';
+export class SelectionUIRenderer {
+    constructor(strokeRenderer, config, extensions) {
+        _SelectionUIRenderer_instances.add(this);
+        _SelectionUIRenderer_strokeRenderer.set(this, void 0);
+        /** The Selection UI extension points of the draw instance this renderer belongs to */
+        _SelectionUIRenderer_extensions.set(this, void 0);
+        _SelectionUIRenderer_config.set(this, void 0);
+        _SelectionUIRenderer_transform.set(this, null);
+        _SelectionUIRenderer_projectionData.set(this, null);
+        __classPrivateFieldSet(this, _SelectionUIRenderer_strokeRenderer, strokeRenderer, "f");
+        __classPrivateFieldSet(this, _SelectionUIRenderer_config, config, "f");
+        __classPrivateFieldSet(this, _SelectionUIRenderer_extensions, extensions, "f");
+    }
+    /** Compute the BoundingBox of a feature (also usable from outside) */
+    computeFeatureBoundingBox(feature) {
+        return computeBoundingBox(feature, __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f"));
+    }
+    /** Compute the combined BoundingBox of several features (also usable from outside) */
+    computeCombinedFeatureBoundingBox(features) {
+        return computeCombinedBoundingBox(features, __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f"));
+    }
+    setTransform(transform) {
+        __classPrivateFieldSet(this, _SelectionUIRenderer_transform, transform, "f");
+    }
+    setProjectionData(projectionData) {
+        __classPrivateFieldSet(this, _SelectionUIRenderer_projectionData, projectionData, "f");
+    }
+    updateConfig(config) {
+        __classPrivateFieldSet(this, _SelectionUIRenderer_config, config, "f");
+    }
+    /**
+     * Draw the UI of the selected features
+     */
+    draw(features, zoom, dragState) {
+        if (features.length === 0)
+            return;
+        // While rotating, the rotated BoundingBox is drawn
+        if (dragState?.operation === 'rotate' && dragState.rotateInfo) {
+            __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_drawRotatingBoundingBox).call(this, features, zoom, dragState);
+            return;
+        }
+        // A single selection
+        if (features.length === 1) {
+            const feature = features[0];
+            const bbox = computeBoundingBox(feature, __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f"));
+            if (bbox && hasZeroArea(bbox)) {
+                __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_drawPointBoundingBox).call(this, feature, bbox.center, zoom);
+            }
+            else {
+                __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_drawBoundingBoxWithMargin).call(this, [feature], zoom);
+            }
+            return;
+        }
+        // A multi-selection: the individual bboxes + the combined bbox
+        for (const feature of features) {
+            const bbox = computeBoundingBox(feature, __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f"));
+            if (bbox && hasZeroArea(bbox)) {
+                __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_drawPointBoundingBox).call(this, feature, bbox.center, zoom);
+            }
+            else {
+                __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_drawIndividualBoundingBox).call(this, feature, zoom);
+            }
+        }
+        __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_drawCombinedBoundingBox).call(this, features, zoom);
+    }
+}
+_SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_extensions = new WeakMap(), _SelectionUIRenderer_config = new WeakMap(), _SelectionUIRenderer_transform = new WeakMap(), _SelectionUIRenderer_projectionData = new WeakMap(), _SelectionUIRenderer_instances = new WeakSet(), _SelectionUIRenderer_drawRotatingBoundingBox = function _SelectionUIRenderer_drawRotatingBoundingBox(features, zoom, dragState) {
+    // When dragState.operation === 'rotate', rotateInfo always exists
+    const rotateInfo = dragState.rotateInfo;
+    if (!rotateInfo)
+        return;
+    const { initialBbox, initialFeatureBboxes, currentAngle } = rotateInfo;
+    const rotationCenter = initialBbox.center;
+    if (features.length > 1 && initialFeatureBboxes) {
+        for (const feature of features) {
+            const featureInitialBbox = initialFeatureBboxes.get(feature.id);
+            if (!featureInitialBbox)
+                continue;
+            const rotatedFeatureBbox = rotateBoundingBox(featureInitialBbox, currentAngle, rotationCenter);
+            const marginedBbox = __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_applyMargin).call(this, rotatedFeatureBbox, zoom);
+            __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokeBoundingBox).call(this, marginedBbox, zoom);
+        }
+    }
+    const rotatedBbox = rotateBoundingBox(initialBbox, currentAngle);
+    const marginedBbox = __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_applyMargin).call(this, rotatedBbox, zoom);
+    __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokeBoundingBox).call(this, marginedBbox, zoom);
+}, _SelectionUIRenderer_drawIndividualBoundingBox = function _SelectionUIRenderer_drawIndividualBoundingBox(feature, zoom) {
+    const bbox = computeBoundingBox(feature, __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f"));
+    if (!bbox)
+        return;
+    __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokeBoundingBox).call(this, __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_applyMargin).call(this, bbox, zoom), zoom);
+}, _SelectionUIRenderer_drawCombinedBoundingBox = function _SelectionUIRenderer_drawCombinedBoundingBox(features, zoom) {
+    if (!__classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f")) {
+        // The fallback when there is no transform (without a margin)
+        const bbox = computeCombinedBoundingBox(features, __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f"));
+        if (bbox)
+            __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokeBoundingBox).call(this, bbox, zoom);
+        return;
+    }
+    const margin = __classPrivateFieldGet(this, _SelectionUIRenderer_config, "f").boundingBox.margin;
+    const transform = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f");
+    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, __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f"));
+        if (!bbox)
+            continue;
+        // A single-coordinate feature (such as Point) is computed from the extent of the
+        // point frame + the margin. The coordinate used is the center of the bbox (features
+        // other than Point can be zero-area too, e.g. a MultiPoint with a single point, so
+        // coordinates must not be treated as a Coordinate)
+        if (hasZeroArea(bbox)) {
+            const center = transform.project(bbox.center);
+            const extent = __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f").resolvePointFrameExtent(feature);
+            const halfWidth = extent.halfWidth + margin;
+            const halfHeight = extent.halfHeight + margin;
+            const topLeft = transform.unproject({ x: center.x - halfWidth, y: center.y - halfHeight });
+            const bottomRight = transform.unproject({
+                x: center.x + halfWidth,
+                y: center.y + halfHeight,
+            });
+            minLng = Math.min(minLng, topLeft.lng, bottomRight.lng);
+            maxLng = Math.max(maxLng, topLeft.lng, bottomRight.lng);
+            minLat = Math.min(minLat, topLeft.lat, bottomRight.lat);
+            maxLat = Math.max(maxLat, topLeft.lat, bottomRight.lat);
+            continue;
+        }
+        const marginedBbox = applyMarginToBoundingBox(bbox, margin, transform, zoom);
+        const corners = [
+            marginedBbox.topLeft,
+            marginedBbox.topRight,
+            marginedBbox.bottomRight,
+            marginedBbox.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;
+    const coords = [
+        [minLng, maxLat],
+        [maxLng, maxLat],
+        [maxLng, minLat],
+        [minLng, minLat],
+        [minLng, maxLat],
+    ];
+    __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokePath).call(this, coords, zoom);
+}, _SelectionUIRenderer_drawBoundingBoxWithMargin = function _SelectionUIRenderer_drawBoundingBoxWithMargin(features, zoom) {
+    const bbox = computeCombinedBoundingBox(features, __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f"));
+    if (!bbox)
+        return;
+    __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokeBoundingBox).call(this, __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_applyMargin).call(this, bbox, zoom), zoom);
+}, _SelectionUIRenderer_drawPointBoundingBox = function _SelectionUIRenderer_drawPointBoundingBox(feature, coord, zoom) {
+    if (!__classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f"))
+        return;
+    const center = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f").project(coord);
+    const margin = __classPrivateFieldGet(this, _SelectionUIRenderer_config, "f").boundingBox.margin;
+    const extent = __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f").resolvePointFrameExtent(feature);
+    const halfWidth = extent.halfWidth + margin;
+    const halfHeight = extent.halfHeight + margin;
+    const topLeft = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f").unproject({
+        x: center.x - halfWidth,
+        y: center.y - halfHeight,
+    });
+    const topRight = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f").unproject({
+        x: center.x + halfWidth,
+        y: center.y - halfHeight,
+    });
+    const bottomRight = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f").unproject({
+        x: center.x + halfWidth,
+        y: center.y + halfHeight,
+    });
+    const bottomLeft = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f").unproject({
+        x: center.x - halfWidth,
+        y: center.y + halfHeight,
+    });
+    const coords = [
+        [topLeft.lng, topLeft.lat],
+        [topRight.lng, topRight.lat],
+        [bottomRight.lng, bottomRight.lat],
+        [bottomLeft.lng, bottomLeft.lat],
+        [topLeft.lng, topLeft.lat],
+    ];
+    __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokePath).call(this, coords, zoom);
+}, _SelectionUIRenderer_applyMargin = function _SelectionUIRenderer_applyMargin(bbox, zoom) {
+    if (!__classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f"))
+        return bbox;
+    const margin = __classPrivateFieldGet(this, _SelectionUIRenderer_config, "f").boundingBox.margin;
+    return {
+        ...applyMarginToBoundingBox(bbox, margin, __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f"), zoom),
+        center: bbox.center,
+    };
+}, _SelectionUIRenderer_strokeBoundingBox = function _SelectionUIRenderer_strokeBoundingBox(bbox, zoom) {
+    const corners = [bbox.topLeft, bbox.topRight, bbox.bottomRight, bbox.bottomLeft];
+    __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokePath).call(this, [...corners, bbox.topLeft], zoom);
+}, _SelectionUIRenderer_strokePath = function _SelectionUIRenderer_strokePath(coords, zoom) {
+    __classPrivateFieldGet(this, _SelectionUIRenderer_strokeRenderer, "f").draw(coords, __classPrivateFieldGet(this, _SelectionUIRenderer_config, "f").boundingBox.stroke, {
+        widthUnit: 'pixels',
+        closed: true,
+        // The frame follows the ground. The elevation comes from the same function as the
+        // handles, so the corners of the frame always match the corner handles and never
+        // drift from the position that can be grabbed
+        followTerrain: true,
+    }, zoom, __classPrivateFieldGet(this, _SelectionUIRenderer_projectionData, "f") ?? undefined);
+};

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

@@ -0,0 +1,55 @@
+/**
+ * Type definitions related to the selection UI
+ *
+ * Gathers the types of BoundingBox, resize computation and the custom feature extension points.
+ */
+import type { BoundingBoxCoords } from '../../../shared/types/selection-box.js';
+import type { Coordinate, Feature } from '../../../store/types.js';
+export type { CustomResizeCalculator } from '../../../extension/index.js';
+export type { BoundingBoxCoords } from '../../../shared/types/selection-box.js';
+/**
+ * Computes the selection box of a feature of a custom type.
+ *
+ * `tileSize` is the tile size in px of the map, for types whose size is given in pixels.
+ * The box is returned as its four corners and its center in degrees.
+ */
+export type CustomBoundingBoxCalculator = (feature: Feature, tileSize: number) => BoundingBoxCoords;
+/**
+ * The half width and half height of the selection frame of a point, in CSS px.
+ *
+ * A point stays zero-area and keeps the branch of "the look of a point" (the frame only,
+ * no resize / rotate handles, move inside the frame). It changes only the frame dimensions.
+ */
+export interface PointFrameExtent {
+    /** The half width from the center (CSS pixels) */
+    halfWidth: number;
+    /** The half height from the center (CSS pixels) */
+    halfHeight: number;
+}
+/**
+ * Returns the size of the selection frame of a point-like feature.
+ *
+ * Returning null gives the default dimensions (the square of DEFAULT_POINT_FRAME_SIZE).
+ */
+export type PointFrameExtentProvider = (feature: Feature) => PointFrameExtent | null;
+/**
+ * A resize handle a custom feature type adds to the built-in ones (the same shape as
+ * {@link HandleInfo}).
+ */
+export interface AdditionalHandleInfo {
+    /** The handle kind, passed back to the resize computation when it is dragged */
+    type: string;
+    /** The position of the handle, `[lng, lat]` in degrees */
+    position: Coordinate;
+}
+/**
+ * Returns the resize handles a feature of a custom type adds, given its selection box.
+ */
+export type AdditionalResizeHandlesCalculator = (feature: Feature, bbox: BoundingBoxCoords) => AdditionalHandleInfo[];
+/**
+ * How a feature type is resized.
+ *
+ *   - scale       : changes the scale property (as with Text and Image)
+ *   - coordinates : changes the coordinates directly (as with Polygon and LineString)
+ */
+export type ResizeStrategy = 'scale' | 'coordinates';

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

@@ -0,0 +1,3 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+export {};

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

@@ -0,0 +1,52 @@
+/**
+ * Selection UI rendering
+ *
+ * Responsible for drawing the selection UI (the bounding box and the handles) for the
+ * selected features.
+ */
+import type { CustomRenderMethodInput, Map as MapLibreMap } from 'maplibre-gl';
+import { type LocalHiddenStore } from '../../store/local-visibility.js';
+import type { DragState, Feature, VertexSelection } from '../../store/types.js';
+import type { PointInstanceRenderer } from '../renderers/point/point-instance.js';
+import type { SelectionHandlesRenderer, SelectionUIRenderer } from './index.js';
+import type { SelectionScope } from './selection-scope.js';
+/**
+ * The dependencies needed to draw the selection UI
+ */
+export interface SelectionUIDrawerDeps {
+    selectionUIRenderer: SelectionUIRenderer | null;
+    selectionHandlesRenderer: SelectionHandlesRenderer | null;
+    pointInstanceRenderer: PointInstanceRenderer | null;
+    map: MapLibreMap;
+    /** The selection scope of the draw instance (extension points and thinned handle sets) */
+    scope: SelectionScope;
+}
+/**
+ * Draw the selection UI
+ */
+export declare function renderSelectionUI(selectedFeatures: Feature[], zoom: number, projectionData: CustomRenderMethodInput['defaultProjectionData'], deps: SelectionUIDrawerDeps, dragState: DragState | null, selectedVertices?: VertexSelection | null, 
+/**
+ * Whether the selection cannot be edited (effective lock / read-only / interaction lock).
+ * When true, no manipulation handles are drawn. The selection box is still drawn (feedback
+ * about "what is selected" is needed in read-only too, and a frame without handles does
+ * not suggest editing).
+ */
+isLocked?: boolean): void;
+/**
+ * The minimal interface of the Store that drawing the following vertices needs
+ *
+ * It is enough to be able to look up a feature by id and to decide local visibility.
+ */
+export interface FollowedVertexStore extends LocalHiddenStore {
+    getFeature(id: string): Feature | undefined;
+}
+/**
+ * Draw the vertices that follow along when a shared vertex is moved
+ *
+ * The following features are not selected, so they do not take the path of the selection UI.
+ * The UI state raised only during a drag (store.getFollowedVertices) is read and they are
+ * drawn in a different style from the selected vertices.
+ * Calling it after the selection UI puts the following vertices in front of the selection
+ * box and the handles.
+ */
+export declare function renderFollowedVertices(followedVertices: VertexSelection[] | null, store: FollowedVertexStore, zoom: number, projectionData: CustomRenderMethodInput['defaultProjectionData'], deps: SelectionUIDrawerDeps): void;

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

@@ -0,0 +1,329 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { THINNING_VIEWPORT_MARGIN_PX } from '../../shared/config/selection.js';
+import { supportsVertexEditing } from '../../shared/utils/coordinates.js';
+import { isGlobeProjection } from '../../shared/utils/map.js';
+import { isLocallyHidden } from '../../store/local-visibility.js';
+import { computeVisibleHandleSet, shouldThinHandles } from './handle-thinning.js';
+import { computeBoundingBox, hasZeroArea, rotateBoundingBox, } from './selection-ui/index.js';
+/**
+ * Draw the selection UI
+ */
+export function renderSelectionUI(selectedFeatures, zoom, projectionData, deps, dragState, selectedVertices, 
+/**
+ * Whether the selection cannot be edited (effective lock / read-only / interaction lock).
+ * When true, no manipulation handles are drawn. The selection box is still drawn (feedback
+ * about "what is selected" is needed in read-only too, and a frame without handles does
+ * not suggest editing).
+ */
+isLocked = false) {
+    const { selectionUIRenderer, selectionHandlesRenderer, pointInstanceRenderer, map, scope } = deps;
+    if (selectedFeatures.length === 0 || !selectionUIRenderer || !selectionHandlesRenderer) {
+        return;
+    }
+    // Set the ProjectionData of PointInstanceRenderer
+    if (pointInstanceRenderer) {
+        pointInstanceRenderer.setProjectionData(projectionData);
+    }
+    // Set the coordinate transform
+    const coordinateTransform = {
+        project: (lngLat) => map.project([lngLat[0], lngLat[1]]),
+        unproject: (point) => {
+            const ll = map.unproject([point.x, point.y]);
+            return { lng: ll.lng, lat: ll.lat };
+        },
+    };
+    selectionUIRenderer.setTransform(coordinateTransform);
+    selectionUIRenderer.setProjectionData(projectionData);
+    selectionHandlesRenderer.setTransform(coordinateTransform);
+    selectionHandlesRenderer.setProjectionData(projectionData);
+    selectionUIRenderer.draw(selectedFeatures, zoom, dragState);
+    // When it is locked, only the selection box is shown and the manipulation handles
+    // (resize/rotate/vertex) are not drawn. This shows visually that it can be selected but
+    // not manipulated.
+    if (isLocked)
+        return;
+    // Support for custom features: uses the combined bounding box computation of selectionUIRenderer
+    let bbox = selectionUIRenderer.computeCombinedFeatureBoundingBox(selectedFeatures);
+    if (!bbox)
+        return;
+    // Control the display of the handles based on the drag state
+    const operation = dragState?.operation ?? null;
+    // While rotating, the rotated bbox is used for drawing the handles
+    const rotateInfo = dragState?.rotateInfo;
+    if (operation === 'rotate' && rotateInfo) {
+        bbox = rotateBoundingBox(rotateInfo.initialBbox, rotateInfo.currentAngle);
+    }
+    if (selectedFeatures.length === 1) {
+        // Get the selected vertex reference (only for the target feature)
+        const selectedVertexRefs = selectedVertices?.featureId === selectedFeatures[0].id
+            ? selectedVertices.vertexIndices
+            : undefined;
+        renderSingleSelectionHandles(selectedFeatures[0], zoom, selectionUIRenderer, selectionHandlesRenderer, operation, dragState, selectedVertexRefs, prepareVisibleHandleSet(selectedFeatures[0], map, scope), scope);
+    }
+    else {
+        renderMultiSelectionHandles(selectedFeatures, bbox, zoom, selectionHandlesRenderer, operation, scope);
+    }
+}
+/**
+ * Prepare the thinning set
+ *
+ * The set is built only for a feature whose total number of handles exceeds the threshold.
+ * For a feature at or below the threshold, undefined is returned and exactly the same path
+ * as before is taken, including the thinning computation.
+ */
+function prepareVisibleHandleSet(feature, map, scope) {
+    if (!supportsVertexEditing(feature.type) || !shouldThinHandles(feature))
+        return undefined;
+    const viewport = computeThinningViewport(map);
+    return scope.thinning.ensureSet(feature, buildCameraSignature(map), performance.now(), () => computeVisibleHandleSet(feature, (coord) => map.project([coord[0], coord[1]]), viewport), 
+    // Make sure the recomputation runs even if no rendering frame arrives after the camera stops
+    () => map.triggerRepaint());
+}
+/**
+ * Build the camera signature
+ *
+ * Only exact equality is looked at, so nothing is rounded. Any movement at all changes the
+ * signature, and the recomputation after the camera stops runs on a debounce.
+ */
+function buildCameraSignature(map) {
+    const center = map.getCenter();
+    return `${center.lng},${center.lat},${map.getZoom()},${map.getBearing()},${map.getPitch()}`;
+}
+/**
+ * Obtain the viewport rectangle used for the preliminary narrowing
+ *
+ * Adds a margin to the bounding rectangle of the screen (including bearing / pitch). The
+ * pixel-to-degree conversion of the margin is obtained from the difference of two unproject
+ * calls. When it crosses longitude ±180 the narrowing is given up (every vertex becomes
+ * a candidate).
+ */
+function computeThinningViewport(map) {
+    // On the globe the bounds maplibre reports fall short of the edge of the sphere, and the
+    // corners of the screen can lie off it, so nothing is narrowed there
+    if (isGlobeProjection(map))
+        return { bounds: null };
+    const bounds = map.getBounds();
+    const origin = map.unproject([0, 0]);
+    const lngMargin = Math.abs(map.unproject([THINNING_VIEWPORT_MARGIN_PX, 0]).lng - origin.lng);
+    const latMargin = Math.abs(map.unproject([0, THINNING_VIEWPORT_MARGIN_PX]).lat - origin.lat);
+    const minLng = bounds.getWest() - lngMargin;
+    const maxLng = bounds.getEast() + lngMargin;
+    if (minLng > maxLng || minLng < -180 || maxLng > 180) {
+        return { bounds: null };
+    }
+    return {
+        bounds: {
+            minLng,
+            maxLng,
+            minLat: bounds.getSouth() - latMargin,
+            maxLat: bounds.getNorth() + latMargin,
+        },
+    };
+}
+/**
+ * Draw the vertices that follow along when a shared vertex is moved
+ *
+ * The following features are not selected, so they do not take the path of the selection UI.
+ * The UI state raised only during a drag (store.getFollowedVertices) is read and they are
+ * drawn in a different style from the selected vertices.
+ * Calling it after the selection UI puts the following vertices in front of the selection
+ * box and the handles.
+ */
+export function renderFollowedVertices(followedVertices, store, zoom, projectionData, deps) {
+    if (!followedVertices || followedVertices.length === 0)
+        return;
+    const { selectionHandlesRenderer, pointInstanceRenderer, map } = deps;
+    if (!selectionHandlesRenderer)
+        return;
+    if (pointInstanceRenderer) {
+        pointInstanceRenderer.setProjectionData(projectionData);
+    }
+    const coordinateTransform = {
+        project: (lngLat) => map.project([lngLat[0], lngLat[1]]),
+        unproject: (point) => {
+            const ll = map.unproject([point.x, point.y]);
+            return { lng: ll.lng, lat: ll.lat };
+        },
+    };
+    selectionHandlesRenderer.setTransform(coordinateTransform);
+    selectionHandlesRenderer.setProjectionData(projectionData);
+    for (const followed of followedVertices) {
+        const feature = store.getFeature(followed.featureId);
+        // The handles of features that disappeared or were hidden during the drag are not drawn
+        if (!feature?.visible || isLocallyHidden(feature, store))
+            continue;
+        selectionHandlesRenderer.drawFollowedVertexHandles(feature, followed.vertexIndices, zoom);
+    }
+}
+/**
+ * Draw the handles for a single selection
+ */
+function renderSingleSelectionHandles(feature, zoom, selectionUIRenderer, selectionHandlesRenderer, operation, dragState, selectedVertexRefs, visibleSet, scope) {
+    // Zero area (a single-coordinate feature) has no resize or rotate handles.
+    // But a vertex-editable type (such as a MultiPoint with a single point) still gets its
+    // vertex handles drawn. Hit testing (hitTestVertexHandles) can grab a vertex even at zero
+    // area, so without drawing them the state would be "grabbable although invisible".
+    const featureBbox = computeBoundingBox(feature, scope.extensions);
+    if (featureBbox && hasZeroArea(featureBbox)) {
+        if (supportsVertexEditing(feature.type) && operation !== 'move') {
+            selectionHandlesRenderer.drawAllHandles(feature, featureBbox, {
+                showResize: false,
+                showRotate: false,
+                showVertex: true,
+                showMidpoint: false,
+                activeVertex: operation === 'vertex' ? dragState?.activeVertex : undefined,
+                selectedVertices: selectedVertexRefs,
+                visibleSet,
+            }, zoom);
+        }
+        return;
+    }
+    // Support for custom features: uses computeFeatureBoundingBox of selectionUIRenderer
+    let singleBbox = selectionUIRenderer.computeFeatureBoundingBox(feature);
+    if (!singleBbox)
+        return;
+    // While rotating, the rotated bbox is used
+    const rotateInfo = dragState?.rotateInfo;
+    if (operation === 'rotate' && rotateInfo) {
+        singleBbox = rotateBoundingBox(rotateInfo.initialBbox, rotateInfo.currentAngle);
+    }
+    // The special handle rendering for Circle
+    if (feature.type === 'Circle') {
+        renderCircleHandles(feature, singleBbox, zoom, selectionHandlesRenderer, operation);
+    }
+    else {
+        renderNonCircleHandles(feature, singleBbox, zoom, selectionHandlesRenderer, operation, dragState, selectedVertexRefs, visibleSet, scope);
+    }
+}
+/**
+ * Draw the handles of a Circle
+ */
+function renderCircleHandles(feature, bbox, zoom, selectionHandlesRenderer, operation) {
+    let showResize = true;
+    let showRadiusHandle = true;
+    let showCenterMarker = true;
+    let showRadiusLine = true;
+    if (operation === 'move') {
+        // While moving: all handles are hidden
+        showResize = false;
+        showRadiusHandle = false;
+        showCenterMarker = false;
+        showRadiusLine = false;
+    }
+    else if (operation === 'resize') {
+        // While resizing: only the resize handles are shown
+        showRadiusHandle = false;
+        showCenterMarker = false;
+        showRadiusLine = false;
+    }
+    else if (operation === 'radius') {
+        // While changing the radius: only the radius-related ones are shown
+        showResize = false;
+    }
+    selectionHandlesRenderer.drawCircleHandles(feature, bbox, {
+        showResize,
+        showRadiusHandle,
+        showCenterMarker,
+        showRadiusLine,
+    }, zoom);
+}
+/**
+ * Draw the handles of features other than Circle
+ */
+function renderNonCircleHandles(feature, bbox, zoom, selectionHandlesRenderer, operation, dragState, selectedVertexRefs, visibleSet, scope) {
+    // The rules for showing handles in a single selection
+    // (LineString, Polygon, the Multi kinds, Image, Freehand, custom features)
+    // The Multi kinds are treated the same as LineString / Polygon (with vertex handles).
+    // MultiPoint has no edges, so the midpoint handles come out empty.
+    const isVertexEditable = supportsVertexEditing(feature.type);
+    const isImage = feature.type === 'Image';
+    const isFreehand = feature.type === 'Freehand';
+    // Custom features: anything other than the types Core knows is treated like Image
+    const isCustomFeature = !isVertexEditable && !isImage && !isFreehand && feature.type !== 'Circle';
+    let showResize = true;
+    let showRotate = true;
+    // Freehand and custom features do not show vertex handles
+    let showVertex = isVertexEditable;
+    let showMidpoint = isVertexEditable;
+    let activeVertex;
+    if (operation === 'move') {
+        // While moving: vertex-editable types/Text/Image/Freehand/custom features hide all handles
+        if (isVertexEditable || isImage || isFreehand || isCustomFeature) {
+            showResize = false;
+            showRotate = false;
+            showVertex = false;
+            showMidpoint = false;
+        }
+    }
+    else if (operation === 'resize') {
+        // While resizing: only the resize handles are shown
+        showRotate = false;
+        showVertex = false;
+        showMidpoint = false;
+    }
+    else if (operation === 'rotate') {
+        // While rotating: only the rotate handles are shown
+        showResize = false;
+        showVertex = false;
+        showMidpoint = false;
+    }
+    else if (operation === 'vertex' || operation === 'midpoint') {
+        // While editing a vertex / adding a vertex: only the vertex being manipulated is shown
+        showResize = false;
+        showRotate = false;
+        showMidpoint = false;
+        activeVertex = dragState?.activeVertex;
+    }
+    // Create the callback that computes the additional handles of a custom feature
+    // Get the calculator from the draw instance's registry
+    let getAdditionalResizeHandles;
+    const calculator = scope.extensions.getAdditionalResizeHandlesCalculator(feature.type);
+    if (calculator) {
+        // Create the callback that receives the bbox after the margin is applied
+        getAdditionalResizeHandles = (marginedBbox) => calculator(feature, marginedBbox);
+    }
+    selectionHandlesRenderer.drawAllHandles(feature, bbox, {
+        showResize,
+        showRotate,
+        showVertex,
+        showMidpoint,
+        activeVertex,
+        selectedVertices: selectedVertexRefs,
+        getAdditionalResizeHandles,
+        visibleSet,
+    }, zoom);
+}
+/**
+ * Draw the handles for a multi-selection
+ */
+function renderMultiSelectionHandles(selectedFeatures, bbox, zoom, selectionHandlesRenderer, operation, scope) {
+    const hasNonPoint = selectedFeatures.some((f) => {
+        const bbox = computeBoundingBox(f, scope.extensions);
+        return bbox !== null && !hasZeroArea(bbox);
+    });
+    if (!hasNonPoint) {
+        return;
+    }
+    let showResize = true;
+    let showRotate = true;
+    if (operation === 'move') {
+        // While moving: the resize and rotate handles are hidden
+        showResize = false;
+        showRotate = false;
+    }
+    else if (operation === 'resize') {
+        // While resizing: the rotate handles are hidden
+        showRotate = false;
+    }
+    else if (operation === 'rotate') {
+        // While rotating: the resize handles are hidden
+        showResize = false;
+    }
+    if (showResize) {
+        selectionHandlesRenderer.drawResizeHandles(bbox, zoom);
+    }
+    if (showRotate) {
+        selectionHandlesRenderer.drawRotateHandle(bbox, zoom);
+    }
+}

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

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