@sakuzu/maplibre-gl-draw 1.0.0 → 2.1.0

package/dist/view/ui/handles.js

@@ -1,8 +1,9 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
-import { destinationPoint } from '../../geometry/index.js';
+import { destinationPoint } from '../../geometry/distance.js';
 import { mercatorMidpoint } from '../../shared/math/globe-subdivision.js';
 import { applyMarginToBoundingBox, clampLatitude } from '../../shared/math/index.js';
+import { coordinatesOf } from '../../shared/utils/coordinates.js';
 import { getCircleRadius, getRadiusHandleAngle } from '../../shared/utils/property.js';
 import { hasVertexRef, isSameVertexRef } from '../../shared/utils/vertex-ref.js';
 import { includeRequiredVertexRefs, resolveMidpointCoordinate, resolveVertexCoordinate, } from './handle-thinning.js';
@@ -164,18 +165,18 @@ export function computeVertexHandles(feature, visibleSet) {
     const handles = [];
     if (feature.type === 'Point') {
         // A Point is a single vertex
-        const coord = feature.coordinates;
+        const coord = coordinatesOf(feature);
         handles.push({ type: 'vertex', position: coord, vertexRef: { ring: 0, index: 0 } });
     }
     else if (feature.type === 'LineString') {
-        collectLineVertexHandles(feature.coordinates, handles);
+        collectLineVertexHandles(coordinatesOf(feature), handles);
     }
     else if (feature.type === 'Polygon') {
-        collectPolygonVertexHandles(feature.coordinates, handles);
+        collectPolygonVertexHandles(coordinatesOf(feature), handles);
     }
     else if (feature.type === 'MultiPoint') {
         // Each coordinate is one part. ring / index are always 0
-        const points = feature.coordinates;
+        const points = coordinatesOf(feature);
         for (let part = 0; part < points.length; part++) {
             handles.push({
                 type: 'vertex',
@@ -185,13 +186,13 @@ export function computeVertexHandles(feature, visibleSet) {
         }
     }
     else if (feature.type === 'MultiLineString') {
-        const parts = feature.coordinates;
+        const parts = coordinatesOf(feature);
         for (let part = 0; part < parts.length; part++) {
             collectLineVertexHandles(parts[part], handles, part);
         }
     }
     else if (feature.type === 'MultiPolygon') {
-        const parts = feature.coordinates;
+        const parts = coordinatesOf(feature);
         for (let part = 0; part < parts.length; part++) {
             collectPolygonVertexHandles(parts[part], handles, part);
         }
@@ -208,7 +209,7 @@ export function computeCircleRadiusHandle(feature) {
     if (feature.type !== 'Circle') {
         return null;
     }
-    const center = feature.coordinates;
+    const center = coordinatesOf(feature);
     const radiusMeters = getCircleRadius(feature);
     const radiusHandleAngle = getRadiusHandleAngle(feature);
     if (!radiusMeters || radiusMeters <= 0) {
@@ -227,7 +228,7 @@ export function computeCircleCenterHandle(feature) {
     if (feature.type !== 'Circle') {
         return null;
     }
-    const center = feature.coordinates;
+    const center = coordinatesOf(feature);
     return {
         type: 'center',
         position: center,
@@ -283,19 +284,19 @@ export function computeMidpointHandles(feature, visibleSet) {
     }
     const handles = [];
     if (feature.type === 'LineString') {
-        collectLineMidpointHandles(feature.coordinates, handles);
+        collectLineMidpointHandles(coordinatesOf(feature), handles);
     }
     else if (feature.type === 'Polygon') {
-        collectPolygonMidpointHandles(feature.coordinates, handles);
+        collectPolygonMidpointHandles(coordinatesOf(feature), handles);
     }
     else if (feature.type === 'MultiLineString') {
-        const parts = feature.coordinates;
+        const parts = coordinatesOf(feature);
         for (let part = 0; part < parts.length; part++) {
             collectLineMidpointHandles(parts[part], handles, part);
         }
     }
     else if (feature.type === 'MultiPolygon') {
-        const parts = feature.coordinates;
+        const parts = coordinatesOf(feature);
         for (let part = 0; part < parts.length; part++) {
             collectPolygonMidpointHandles(parts[part], handles, part);
         }
@@ -528,6 +529,13 @@ export class SelectionHandlesRenderer {
         const handles = computeVertexHandles(feature).filter((h) => hasVertexRef(followedVertices, h.vertexRef));
         this.drawHandlesWithStyle(handles, this.config.vertexHandle.followed, zoom);
     }
+    /**
+     * Draws the auxiliary handles of the extensions with the look of the vertex handles, the
+     * size their hit test uses
+     */
+    drawAuxiliaryHandles(positions, zoom) {
+        this.drawHandlesWithStyle(positions.map((position) => ({ position })), this.config.vertexHandle.point, zoom);
+    }
     /**
      * Draws a group of handles with a single style
      *

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

@@ -16,4 +16,4 @@ import type { Store } from '../../store/store.js';
  * @param store The Store to read the selection from
  * @returns The feature ids. An empty array when nothing is selected
  */
-export declare function getSelectedFeatureIds(store: Store): string[];
+export declare function getSelectedFeatureIds(store: Store): readonly string[];

package/dist/view/ui/helper.js

@@ -32,7 +32,7 @@ function featureIdsInLayer(store, layerId) {
     if (!layer)
         return [];
     const ids = [];
-    for (const itemId of layer.order) {
+    for (const itemId of layer.items) {
         if (store.getFeature(itemId)) {
             ids.push(itemId);
         }

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

@@ -9,7 +9,7 @@ export { getCursorForHandle, hitTestGlobalAuxiliaryHandles, hitTestHandles, } fr
 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 type { AdditionalHandleInfo, AdditionalResizeHandlesCalculator, BoundingBoxCoords, CustomBoundingBoxCalculator, PointFrameExtent, PointFrameExtentProvider, ResizeStrategy, SelectionExtensionRegistry, TypeResizeCalculator, } 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/selection-scope.js

@@ -15,10 +15,12 @@ import { createSelectionExtensionRegistry, } from './selection-ui/extension-regi
 /**
  * Creates the selection scope of one draw instance
  *
+ * @param options.defaultPointFrameExtent - The extent of the frame of a point whose type
+ *   registers none (see createSelectionExtensionRegistry)
  * @internal
  */
-export function createSelectionScope() {
-    const extensions = createSelectionExtensionRegistry();
+export function createSelectionScope(options = {}) {
+    const extensions = createSelectionExtensionRegistry(options.defaultPointFrameExtent);
     const auxiliaryHandles = createAuxiliaryHandleRegistry();
     const thinning = new HandleThinningCache();
     return {

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

@@ -13,6 +13,7 @@
 import { circleBoundingBox } from '../../../geometry/circle.js';
 import { pixelsToDegreesLat, pixelsToDegreesLng } from '../../../shared/math/index.js';
 import { fromPlane, toPlane } from '../../../shared/math/mercator-plane.js';
+import { coordinatesOf } from '../../../shared/utils/coordinates.js';
 import { getCircleRadius, getCreatedZoom, getImageProperties, } from '../../../shared/utils/property.js';
 import { getBoundingBox } from '../../../store/spatial/index.js';
 /**
@@ -45,7 +46,7 @@ export function computeBoundingBox(feature, extensions) {
         return customCalculator(feature, extensions.getTileSize());
     }
     if (feature.type === 'Point') {
-        const coord = feature.coordinates;
+        const coord = coordinatesOf(feature);
         return {
             topLeft: coord,
             topRight: coord,
@@ -80,7 +81,7 @@ export function computeBoundingBox(feature, extensions) {
  * 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 center = coordinatesOf(feature);
     const radiusMeters = getCircleRadius(feature);
     const extent = radiusMeters && radiusMeters > 0 ? circleBoundingBox(center, radiusMeters) : null;
     if (!extent) {
@@ -108,13 +109,12 @@ function computeCircleBoundingBox(feature) {
  * (the same method as computeQuadVertices in quad-shader.ts).
  */
 function computeOrientedBoundingBox(feature) {
-    const coord = feature.coordinates;
+    const coord = coordinatesOf(feature);
     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 imageWidth = props.imageWidth || 100;
+    const imageHeight = 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.

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

@@ -1,22 +1,11 @@
-/**
- * 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';
+import type { AdditionalResizeHandlesCalculator, CustomBoundingBoxCalculator, FramePoint, PointFrameExtent, PointFrameExtentProvider, PointFrameOutlineProvider, ResizeStrategy, TypeResizeCalculator } 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).
+ * The same value as DEFAULT_POINT_STYLE.size. Types with neither a registered extent nor a
+ * default extent of the registry become this square. A draw instance gives its registry the
+ * extent of the marker of a built-in point as the default.
  */
 export declare const DEFAULT_POINT_FRAME_SIZE = 12;
 /**
@@ -35,9 +24,9 @@ export interface SelectionExtensionRegistry {
     /** 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;
+    registerCustomResize(type: string, calculator: TypeResizeCalculator): () => void;
     /** Returns the custom resize calculator of a type, or `undefined` */
-    getCustomResizeCalculator(type: string): CustomResizeCalculator | undefined;
+    getCustomResizeCalculator(type: string): TypeResizeCalculator | 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` */
@@ -50,10 +39,21 @@ export interface SelectionExtensionRegistry {
      * 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).
+     * degrade to the default extent of the registry, and then 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;
+    /** Registers the outline of the selection frame of a point-like feature type */
+    registerPointFrameOutline(type: string, provider: PointFrameOutlineProvider): () => void;
+    /**
+     * The four corners of the selection frame of a zero-area feature on the screen, expanded by
+     * the margin: the registered outline when it gives four finite corners, else the rectangle
+     * of {@link resolvePointFrameExtent} around the center
+     *
+     * @param center The center of the frame on the screen, in CSS px
+     * @param margin The margin of the frame, in CSS px
+     */
+    resolvePointFrameCorners(feature: Feature, center: FramePoint, margin: number): FramePoint[];
     /** 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) */
@@ -65,12 +65,23 @@ export interface SelectionExtensionRegistry {
  * Creates an empty {@link SelectionExtensionRegistry} with a tile size of 512 px, for testing a
  * custom feature handler in isolation.
  *
+ * @param defaultPointFrameExtent - The extent of the frame of a point whose type registers
+ *   none, or whose provider gives none; without it (or when it returns null) the frame is the
+ *   square of DEFAULT_POINT_FRAME_SIZE
  * @returns A new registry with no registration
  */
-export declare function createSelectionExtensionRegistry(): SelectionExtensionRegistry;
+export declare function createSelectionExtensionRegistry(defaultPointFrameExtent?: PointFrameExtentProvider): 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;
+/**
+ * The four corners of the selection frame of a zero-area feature on the screen, expanded by
+ * the margin, with optional providers
+ *
+ * An outline of four finite corners has every edge moved outward by the margin; any other
+ * outline, or none, gives the rectangle of the extent around the center, widened the same way.
+ */
+export declare function resolvePointFrameCornersWith(extentProvider: PointFrameExtentProvider | undefined, outlineProvider: PointFrameOutlineProvider | undefined, feature: Feature, center: FramePoint, margin: number): FramePoint[];

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

@@ -1,10 +1,24 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * 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 its engine and handed to the
+ * CustomLayer, the modes and the extension host). 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 { expandQuad } from '../../../shared/math/transform.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).
+ * The same value as DEFAULT_POINT_STYLE.size. Types with neither a registered extent nor a
+ * default extent of the registry become this square. A draw instance gives its registry the
+ * extent of the marker of a built-in point as the default.
  */
 export const DEFAULT_POINT_FRAME_SIZE = 12;
 /** The tile size used until the map reports its own (maplibre's default) */
@@ -23,15 +37,28 @@ function registerIn(map, type, value) {
  * Creates an empty {@link SelectionExtensionRegistry} with a tile size of 512 px, for testing a
  * custom feature handler in isolation.
  *
+ * @param defaultPointFrameExtent - The extent of the frame of a point whose type registers
+ *   none, or whose provider gives none; without it (or when it returns null) the frame is the
+ *   square of DEFAULT_POINT_FRAME_SIZE
  * @returns A new registry with no registration
  */
-export function createSelectionExtensionRegistry() {
+export function createSelectionExtensionRegistry(defaultPointFrameExtent) {
     const boundingBoxes = new Map();
     const additionalHandles = new Map();
     const customResizes = new Map();
     const resizeStrategies = new Map();
     const pointFrameExtents = new Map();
+    const pointFrameOutlines = new Map();
     let tileSize = DEFAULT_REGISTRY_TILE_SIZE;
+    /** The extent provider of a type, falling back to the default extent of the registry */
+    const extentProviderOf = (type) => {
+        const own = pointFrameExtents.get(type);
+        if (!defaultPointFrameExtent)
+            return own;
+        if (!own)
+            return defaultPointFrameExtent;
+        return (feature) => validExtent(own(feature)) ?? defaultPointFrameExtent(feature);
+    };
     return {
         registerBoundingBox: (type, calculator) => registerIn(boundingBoxes, type, calculator),
         getBoundingBoxCalculator: (type) => boundingBoxes.get(type),
@@ -44,7 +71,11 @@ export function createSelectionExtensionRegistry() {
         registerPointFrameExtent: (type, provider) => registerIn(pointFrameExtents, type, provider),
         getPointFrameExtentProvider: (type) => pointFrameExtents.get(type),
         resolvePointFrameExtent(feature) {
-            return resolvePointFrameExtentWith(pointFrameExtents.get(feature.type), feature);
+            return resolvePointFrameExtentWith(extentProviderOf(feature.type), feature);
+        },
+        registerPointFrameOutline: (type, provider) => registerIn(pointFrameOutlines, type, provider),
+        resolvePointFrameCorners(feature, center, margin) {
+            return resolvePointFrameCornersWith(extentProviderOf(feature.type), pointFrameOutlines.get(feature.type), feature, center, margin);
         },
         getTileSize: () => tileSize,
         setTileSize(value) {
@@ -56,6 +87,7 @@ export function createSelectionExtensionRegistry() {
             customResizes.clear();
             resizeStrategies.clear();
             pointFrameExtents.clear();
+            pointFrameOutlines.clear();
         },
     };
 }
@@ -65,14 +97,45 @@ export function createSelectionExtensionRegistry() {
  * Without a registry (callers outside a draw instance) the default square is returned.
  */
 export function resolvePointFrameExtentWith(provider, feature) {
-    const extent = provider?.(feature);
+    const extent = validExtent(provider?.(feature));
+    if (!extent) {
+        const half = DEFAULT_POINT_FRAME_SIZE / 2;
+        return { halfWidth: half, halfHeight: half };
+    }
+    return extent;
+}
+/** The extent when it is one (finite and not negative), else null */
+function validExtent(extent) {
     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 null;
     }
     return extent;
 }
+/**
+ * The four corners of the selection frame of a zero-area feature on the screen, expanded by
+ * the margin, with optional providers
+ *
+ * An outline of four finite corners has every edge moved outward by the margin; any other
+ * outline, or none, gives the rectangle of the extent around the center, widened the same way.
+ */
+export function resolvePointFrameCornersWith(extentProvider, outlineProvider, feature, center, margin) {
+    const outline = outlineProvider?.(feature);
+    if (outline &&
+        outline.length === 4 &&
+        outline.every((corner) => Number.isFinite(corner.x) && Number.isFinite(corner.y))) {
+        return expandQuad(outline, margin);
+    }
+    const extent = resolvePointFrameExtentWith(extentProvider, feature);
+    const halfWidth = extent.halfWidth + margin;
+    const halfHeight = extent.halfHeight + margin;
+    return [
+        { x: center.x - halfWidth, y: center.y - halfHeight },
+        { x: center.x + halfWidth, y: center.y - halfHeight },
+        { x: center.x + halfWidth, y: center.y + halfHeight },
+        { x: center.x - halfWidth, y: center.y + halfHeight },
+    ];
+}

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

@@ -7,6 +7,6 @@
  */
 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 { createSelectionExtensionRegistry, DEFAULT_POINT_FRAME_SIZE, resolvePointFrameCornersWith, resolvePointFrameExtentWith, } from './extension-registry.js';
 export { SelectionUIRenderer } from './renderer.js';
-export type { AdditionalHandleInfo, AdditionalResizeHandlesCalculator, BoundingBoxCoords, CustomBoundingBoxCalculator, CustomResizeCalculator, PointFrameExtent, PointFrameExtentProvider, ResizeStrategy, } from './types.js';
+export type { AdditionalHandleInfo, AdditionalResizeHandlesCalculator, BoundingBoxCoords, CustomBoundingBoxCalculator, FramePoint, PointFrameExtent, PointFrameExtentProvider, PointFrameOutlineProvider, ResizeStrategy, TypeResizeCalculator, } from './types.js';

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

@@ -8,5 +8,5 @@
  * symbols.
  */
 export { computeBoundingBox, computeCombinedBoundingBox, hasZeroArea, rotateBoundingBox, } from './bounding-box.js';
-export { createSelectionExtensionRegistry, DEFAULT_POINT_FRAME_SIZE, resolvePointFrameExtentWith, } from './extension-registry.js';
+export { createSelectionExtensionRegistry, DEFAULT_POINT_FRAME_SIZE, resolvePointFrameCornersWith, resolvePointFrameExtentWith, } from './extension-registry.js';
 export { SelectionUIRenderer } from './renderer.js';

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

@@ -129,18 +129,13 @@ _SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_extens
         // 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);
+            for (const corner of __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f").resolvePointFrameCorners(feature, center, margin)) {
+                const at = transform.unproject(corner);
+                minLng = Math.min(minLng, at.lng);
+                maxLng = Math.max(maxLng, at.lng);
+                minLat = Math.min(minLat, at.lat);
+                maxLat = Math.max(maxLat, at.lat);
+            }
             continue;
         }
         const marginedBbox = applyMarginToBoundingBox(bbox, margin, transform, zoom);
@@ -175,34 +170,16 @@ _SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_extens
 }, _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 transform = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f");
+    const center = transform.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 coords = __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f")
+        .resolvePointFrameCorners(feature, center, margin)
+        .map((corner) => {
+        const at = transform.unproject(corner);
+        return [at.lng, at.lat];
     });
-    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],
-    ];
+    coords.push(coords[0]);
     __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokePath).call(this, coords, zoom);
 }, _SelectionUIRenderer_applyMargin = function _SelectionUIRenderer_applyMargin(bbox, zoom) {
     if (!__classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f"))

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

@@ -5,7 +5,7 @@
  */
 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 { TypeResizeCalculator } from '../../../extension/index.js';
 export type { BoundingBoxCoords } from '../../../shared/types/selection-box.js';
 /**
  * Computes the selection box of a feature of a custom type.
@@ -29,9 +29,24 @@ export interface PointFrameExtent {
 /**
  * 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).
+ * Returning null gives the default dimensions: the extent of the marker for a point the
+ * built-in type draws, else the square of DEFAULT_POINT_FRAME_SIZE.
  */
 export type PointFrameExtentProvider = (feature: Feature) => PointFrameExtent | null;
+/** A point on the screen in CSS px, from the top left of the map */
+export interface FramePoint {
+    x: number;
+    y: number;
+}
+/**
+ * Returns the outline of the selection frame of a point-like feature: its four corners on the
+ * screen in CSS px, in the order top left, top right, bottom right, bottom left of the shape.
+ *
+ * The frame of a rotated shape is drawn along it. The point stays zero-area: no resize or
+ * rotate handle appears. Returning null (or anything but four finite corners) gives the frame
+ * of {@link PointFrameExtentProvider}.
+ */
+export type PointFrameOutlineProvider = (feature: Feature) => readonly FramePoint[] | null;
 /**
  * A resize handle a custom feature type adds to the built-in ones (the same shape as
  * {@link HandleInfo}).

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

@@ -32,6 +32,14 @@ export declare function renderSelectionUI(selectedFeatures: Feature[], zoom: num
  * not suggest editing).
  */
 isLocked?: boolean): void;
+/**
+ * Draw the auxiliary handles that belong to no feature (`getGlobalHandles`), whatever is
+ * selected
+ *
+ * The caller draws them only while they can be grabbed (the select mode, and the document
+ * neither read-only nor under the interaction lock).
+ */
+export declare function renderGlobalAuxiliaryHandles(zoom: number, projectionData: CustomRenderMethodInput['defaultProjectionData'], deps: SelectionUIDrawerDeps, dragState: DragState | null): void;
 /**
  * The minimal interface of the Store that drawing the following vertices needs
  *

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

@@ -57,14 +57,75 @@ isLocked = false) {
     if (selectedFeatures.length === 1) {
         // Get the selected vertex reference (only for the target feature)
         const selectedVertexRefs = selectedVertices?.featureId === selectedFeatures[0].id
-            ? selectedVertices.vertexIndices
+            ? selectedVertices.vertices
             : undefined;
         renderSingleSelectionHandles(selectedFeatures[0], zoom, selectionUIRenderer, selectionHandlesRenderer, operation, dragState, selectedVertexRefs, prepareVisibleHandleSet(selectedFeatures[0], map, scope), scope);
+        // The handles of the extensions, shown as the other handles are (hidden while another
+        // operation runs)
+        if (operation === null || operation === 'auxiliary') {
+            const context = auxiliaryHandleContext(map, zoom);
+            const positions = scope.auxiliaryHandles
+                .list()
+                .flatMap((provider) => provider.getHandles(selectedFeatures[0], context).map((handle) => handle.position));
+            if (positions.length > 0)
+                selectionHandlesRenderer.drawAuxiliaryHandles(positions, zoom);
+        }
     }
     else {
         renderMultiSelectionHandles(selectedFeatures, bbox, zoom, selectionHandlesRenderer, operation, scope);
     }
 }
+/**
+ * Draw the auxiliary handles that belong to no feature (`getGlobalHandles`), whatever is
+ * selected
+ *
+ * The caller draws them only while they can be grabbed (the select mode, and the document
+ * neither read-only nor under the interaction lock).
+ */
+export function renderGlobalAuxiliaryHandles(zoom, projectionData, deps, dragState) {
+    const { selectionHandlesRenderer, pointInstanceRenderer, map, scope } = deps;
+    if (!selectionHandlesRenderer)
+        return;
+    const operation = dragState?.operation ?? null;
+    if (operation !== null && operation !== 'auxiliary')
+        return;
+    const providers = scope.auxiliaryHandles.list();
+    if (!providers.some((provider) => provider.getGlobalHandles !== undefined))
+        return;
+    const context = auxiliaryHandleContext(map, zoom);
+    const positions = providers.flatMap((provider) => provider.getGlobalHandles?.(context).map((handle) => handle.position) ?? []);
+    if (positions.length === 0)
+        return;
+    if (pointInstanceRenderer)
+        pointInstanceRenderer.setProjectionData(projectionData);
+    selectionHandlesRenderer.setTransform(coordinateTransformOf(map));
+    selectionHandlesRenderer.setProjectionData(projectionData);
+    selectionHandlesRenderer.drawAuxiliaryHandles(positions, zoom);
+}
+/** The coordinate transform of the map */
+function coordinateTransformOf(map) {
+    return {
+        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 };
+        },
+    };
+}
+/**
+ * The context the providers of auxiliary handles get when their handles are drawn: the
+ * point is the center of the canvas, as there is no pointer to test
+ */
+function auxiliaryHandleContext(map, zoom) {
+    const transform = coordinateTransformOf(map);
+    const canvas = map.getCanvas();
+    return {
+        point: { x: canvas.clientWidth / 2, y: canvas.clientHeight / 2 },
+        project: (lngLat) => transform.project(lngLat),
+        unproject: (point) => transform.unproject(point),
+        zoom,
+    };
+}
 /**
  * Prepare the thinning set
  *
@@ -153,7 +214,7 @@ export function renderFollowedVertices(followedVertices, store, zoom, projection
         // 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);
+        selectionHandlesRenderer.drawFollowedVertexHandles(feature, followed.vertices, zoom);
     }
 }
 /**

package/dist/view/ui/tentative.js

@@ -1,6 +1,6 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
-import { destinationPoint } from '../../geometry/index.js';
+import { destinationPoint } from '../../geometry/distance.js';
 import { generateCirclePolygon } from '../../shared/math/index.js';
 import { FillShaderManager } from '../renderers/polygon/fill.js';
 /**