@sakuzu/maplibre-gl-draw 1.0.0

package/dist/modes/select/drag/move.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Move drag: translates the selected features by the pointer offset
+ */
+import type { DragNormalizedEvent } from '../../../dispatcher/types.js';
+import type { FeatureCoordinates } from '../../../store/types.js';
+import type { DragStore } from './operation.js';
+/**
+ * State of a move operation
+ */
+export interface MoveState {
+    /** Coordinate at the start of the drag */
+    startLngLat: {
+        lng: number;
+        lat: number;
+    };
+    /** IDs of the features being dragged */
+    featureIds: string[];
+    /** Feature coordinates at the start */
+    initialCoordinates: Map<string, FeatureCoordinates>;
+}
+/**
+ * Start a move drag of the given features
+ */
+export declare function startMoveDrag(event: DragNormalizedEvent, featureIds: string[], store: DragStore): MoveDrag;

package/dist/modes/select/drag/move.js

@@ -0,0 +1,59 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { mapCoordinatesDeep } from '../../../shared/utils/coordinates.js';
+import { dragStartLngLat } from './operation.js';
+/**
+ * Translate coordinates
+ *
+ * Because it uses a shared traversal that does not depend on nesting depth, Multi geometries
+ * (MultiPolygon nests 4 levels deep) can be moved as-is.
+ */
+function translateCoordinates(coords, dx, dy) {
+    return mapCoordinatesDeep(coords, (coord) => [coord[0] + dx, coord[1] + dy]);
+}
+/** @internal */
+export class MoveDrag {
+    constructor(state) {
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: state
+        });
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'move'
+        });
+    }
+    update(event, store, writes) {
+        const dx = event.lngLat.lng - this.state.startLngLat.lng;
+        const dy = event.lngLat.lat - this.state.startLngLat.lat;
+        for (const id of this.state.featureIds) {
+            const feature = store.getFeature(id);
+            const initialCoords = this.state.initialCoordinates.get(id);
+            if (feature && initialCoords) {
+                const newCoords = translateCoordinates(initialCoords, dx, dy);
+                writes.write(store, id, { coordinates: newCoords });
+            }
+        }
+    }
+}
+/**
+ * Start a move drag of the given features
+ */
+export function startMoveDrag(event, featureIds, store) {
+    const initialCoordinates = new Map();
+    for (const id of featureIds) {
+        const feature = store.getFeature(id);
+        if (feature) {
+            initialCoordinates.set(id, JSON.parse(JSON.stringify(feature.coordinates)));
+        }
+    }
+    return new MoveDrag({
+        startLngLat: dragStartLngLat(event),
+        featureIds: [...featureIds],
+        initialCoordinates,
+    });
+}

package/dist/modes/select/drag/operation.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The shape shared by the drag operations of select mode
+ *
+ * Each kind of drag (move, resize, rotate, vertex, midpoint, radius, auxiliary handle) is one
+ * DragOperation. SelectModeDragHandler decides which kind a drag is, starts it, and forwards
+ * every frame to it. The operation computes the new values and writes them through
+ * IntermediateWrites, which keeps what a commit or an abort needs.
+ */
+import type { DragNormalizedEvent } from '../../../dispatcher/types.js';
+import type { Feature } from '../../../store/types.js';
+import type { ModeContext } from '../../handler.js';
+/** The Store a drag writes to */
+export type DragStore = ModeContext['store'];
+/**
+ * The selection scope of the draw instance the drag belongs to (the resize and rotate
+ * strategies of custom types, and the auxiliary handle providers). Null before a drag starts
+ */
+export type DragScope = ModeContext['selectionScope'] | null;
+/**
+ * The drag start position (the exact position before the 3-pixel movement)
+ */
+export declare function dragStartLngLat(event: DragNormalizedEvent): {
+    lng: number;
+    lat: number;
+};
+/**
+ * The selected features, with group / layer selections resolved to their member features
+ * (so that a group is moved / resized / rotated as one)
+ */
+export declare function selectedFeaturesOf(store: DragStore): Feature[];

package/dist/modes/select/drag/operation.js

@@ -0,0 +1,18 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { getSelectedFeatureIds } from '../../../view/ui/helper.js';
+/**
+ * The drag start position (the exact position before the 3-pixel movement)
+ */
+export function dragStartLngLat(event) {
+    return event.dragStartLngLat ?? event.lngLat;
+}
+/**
+ * The selected features, with group / layer selections resolved to their member features
+ * (so that a group is moved / resized / rotated as one)
+ */
+export function selectedFeaturesOf(store) {
+    return getSelectedFeatureIds(store)
+        .map((id) => store.getFeature(id))
+        .filter((f) => f !== undefined);
+}

package/dist/modes/select/drag/radius.d.ts

@@ -0,0 +1,15 @@
+import type { Coordinate } from '../../../store/types.js';
+import type { DragStore } from './operation.js';
+/**
+ * State of a Circle radius change operation
+ */
+export interface RadiusState {
+    /** ID of the feature being operated on */
+    featureId: string;
+    /** Center coordinate of the circle */
+    center: Coordinate;
+}
+/**
+ * Start a radius drag. Returns null when the feature is not a Circle
+ */
+export declare function startRadiusDrag(featureId: string, store: DragStore): RadiusDrag | null;

package/dist/modes/select/drag/radius.js

@@ -0,0 +1,49 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { haversineDistanceMeters, initialBearingDegrees } from '../../../geometry/index.js';
+/** @internal */
+export class RadiusDrag {
+    constructor(state) {
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: state
+        });
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'radius'
+        });
+    }
+    update(event, store, writes) {
+        const feature = store.getFeature(this.state.featureId);
+        if (feature?.type !== 'Circle')
+            return;
+        const { center } = this.state;
+        const mousePoint = [event.lngLat.lng, event.lngLat.lat];
+        // Take the distance between the mouse position and the center as the new radius
+        const newRadiusMeters = haversineDistanceMeters(center, mousePoint);
+        // The great-circle bearing of the radius change handle. The handle is placed with
+        // destinationPoint, the inverse of this bearing, so it stays under the pointer
+        const newAngle = initialBearingDegrees(center, mousePoint);
+        const updates = {
+            properties: {
+                ...feature.properties,
+                radiusMeters: newRadiusMeters,
+                radiusHandleAngle: newAngle,
+            },
+        };
+        writes.write(store, this.state.featureId, updates);
+    }
+}
+/**
+ * Start a radius drag. Returns null when the feature is not a Circle
+ */
+export function startRadiusDrag(featureId, store) {
+    const feature = store.getFeature(featureId);
+    if (feature?.type !== 'Circle')
+        return null;
+    return new RadiusDrag({ featureId, center: feature.coordinates });
+}

package/dist/modes/select/drag/transform.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Transform drags: resize and rotate the selection with its bounding box handles
+ */
+import type { DragNormalizedEvent } from '../../../dispatcher/types.js';
+import type { HandleType } from '../../../shared/config/constants.js';
+import type { Feature } from '../../../store/types.js';
+import type { BoundingBoxCoords } from '../../../view/ui/selection-ui/index.js';
+import type { ModeContext } from '../../handler.js';
+import type { DragScope, DragStore } from './operation.js';
+/**
+ * Start a resize drag from a bounding box handle
+ */
+export declare function startResizeDrag(event: DragNormalizedEvent, handle: HandleType, bbox: BoundingBoxCoords, features: Feature[], map: ModeContext['map'], scope: DragScope): ResizeDrag;
+/**
+ * Start a rotate drag from the rotation handle, and set the DragState it draws from
+ */
+export declare function startRotateDrag(event: DragNormalizedEvent, bbox: BoundingBoxCoords, features: Feature[], store: DragStore, scope: DragScope): RotateDrag;

package/dist/modes/select/drag/transform.js

@@ -0,0 +1,155 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { computeResize, startResize } from '../../../operations/resize.js';
+import { computeRotation, getRotationDelta, startRotation } from '../../../operations/rotate.js';
+import { computeBoundingBox } from '../../../view/ui/selection-ui/index.js';
+import { dragStartLngLat, selectedFeaturesOf } from './operation.js';
+// === Resize operation ===
+/** @internal */
+export class ResizeDrag {
+    constructor(state, scope) {
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: state
+        });
+        Object.defineProperty(this, "scope", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: scope
+        });
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'resize'
+        });
+    }
+    update(event, store, writes) {
+        // Compute the resize for each feature
+        for (const feature of selectedFeaturesOf(store)) {
+            const resizeResults = computeResize(this.state, event.lngLat, [feature], this.scope?.extensions);
+            const result = resizeResults.get(feature.id);
+            if (result) {
+                const updates = { coordinates: result.coordinates };
+                // Update the scale property when there is one (Text, Image, etc.)
+                if (result.scale !== undefined) {
+                    updates.properties = {
+                        ...feature.properties,
+                        scale: result.scale,
+                    };
+                }
+                // For a Circle, also update the radiusMeters property
+                if (result.radiusMeters !== undefined && feature.type === 'Circle') {
+                    updates.properties = {
+                        ...feature.properties,
+                        radiusMeters: result.radiusMeters,
+                    };
+                }
+                // For a custom resize, also update the width / height properties (Note, etc.)
+                if (result.width !== undefined || result.height !== undefined) {
+                    updates.properties = {
+                        ...feature.properties,
+                        ...(result.width !== undefined && { width: result.width }),
+                        ...(result.height !== undefined && { height: result.height }),
+                    };
+                }
+                writes.write(store, feature.id, updates);
+            }
+        }
+    }
+}
+/**
+ * Start a resize drag from a bounding box handle
+ */
+export function startResizeDrag(event, handle, bbox, features, map, scope) {
+    // A box thinner than 1 pixel on screen is not stretched along that axis (converted into
+    // Web Mercator world units at the current zoom)
+    const zoom = map.getZoom?.();
+    const tileSize = scope?.extensions.getTileSize() ?? 512;
+    const minAxisExtent = Number.isFinite(zoom) ? 1 / (tileSize * 2 ** zoom) : 0;
+    const state = startResize(handle, dragStartLngLat(event), bbox, features, scope?.extensions, minAxisExtent);
+    return new ResizeDrag(state, scope);
+}
+// === Rotate operation ===
+/** @internal */
+export class RotateDrag {
+    constructor(state) {
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: state
+        });
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'rotate'
+        });
+    }
+    update(event, store, writes) {
+        const rotateResults = computeRotation(this.state, event.lngLat, selectedFeaturesOf(store));
+        for (const [id, result] of rotateResults) {
+            const feature = store.getFeature(id);
+            if (feature) {
+                const updates = { coordinates: result.coordinates };
+                // Update the rotation property when there is one (Text, Image, Note, etc.)
+                if (result.rotation !== undefined) {
+                    updates.properties = {
+                        ...feature.properties,
+                        rotation: result.rotation,
+                    };
+                }
+                writes.write(store, id, updates);
+            }
+        }
+        // Update the rotation angle (for drawing the bbox during the rotation)
+        const currentAngle = getRotationDelta(this.state, event.lngLat);
+        const currentDragState = store.getDragState();
+        if (currentDragState?.rotateInfo) {
+            store.setDragState({
+                ...currentDragState,
+                rotateInfo: {
+                    ...currentDragState.rotateInfo,
+                    currentAngle,
+                },
+            });
+        }
+    }
+}
+/**
+ * Start a rotate drag from the rotation handle, and set the DragState it draws from
+ */
+export function startRotateDrag(event, bbox, features, store, scope) {
+    const drag = new RotateDrag(startRotation(dragStartLngLat(event), bbox, features, scope?.extensions));
+    // On a multiple selection, also save the initialBbox of each feature
+    let initialFeatureBboxes;
+    if (features.length > 1) {
+        initialFeatureBboxes = new Map();
+        for (const feature of features) {
+            const featureBbox = computeBoundingBox(feature, scope?.extensions);
+            if (featureBbox) {
+                initialFeatureBboxes.set(feature.id, featureBbox);
+            }
+        }
+    }
+    // Save the bbox at the start of the rotation (for drawing the bbox during the rotation)
+    store.setDragState({
+        operation: 'rotate',
+        rotateInfo: {
+            initialBbox: {
+                topLeft: bbox.topLeft,
+                topRight: bbox.topRight,
+                bottomRight: bbox.bottomRight,
+                bottomLeft: bbox.bottomLeft,
+                center: bbox.center,
+            },
+            initialFeatureBboxes,
+            currentAngle: 0,
+        },
+    });
+    return drag;
+}

package/dist/modes/select/drag/vertex.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Vertex drags: move vertices, and insert a vertex by dragging a midpoint
+ */
+import type { DragNormalizedEvent } from '../../../dispatcher/types.js';
+import type { VertexRef } from '../../../store/types.js';
+import type { ModeContext } from '../../handler.js';
+import type { DragStore } from './operation.js';
+/**
+ * Start a vertex drag, and set the DragState and the followed vertices it draws from. Returns
+ * null when the feature or the vertex is gone
+ */
+export declare function startVertexDrag(event: DragNormalizedEvent, featureId: string, vertexRef: VertexRef, context: ModeContext): VertexDrag | null;
+/**
+ * Start a midpoint drag: insert a vertex at the midpoint and continue as a move of that
+ * vertex. Returns null when the feature is gone
+ */
+export declare function startMidpointDrag(event: DragNormalizedEvent, featureId: string, after: VertexRef, store: DragStore): VertexDrag | null;

package/dist/modes/select/drag/vertex.js

@@ -0,0 +1,163 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { collectSharedVertexMoves } from '../../../operations/shared-vertex.js';
+import { addVertex, computeVertexMove, startVertexMove } from '../../../operations/vertex.js';
+import { hasVertexRef } from '../../../shared/utils/vertex-ref.js';
+import { dragStartLngLat } from './operation.js';
+/**
+ * Whether the modifier key that temporarily disables shared-vertex following is held down
+ *
+ * The temporary-disable key is shared with snapping (options.snap.disableKey, 'alt' by default).
+ * Holding it down when starting a drag escapes to a solitary move for that one drag only.
+ *
+ * The decision looks only at the normalized modifier keys of the drag start event (core does not
+ * deal with raw DOM events). Pressing or releasing the key mid-drag does not change the set.
+ * When disableKey is 'none', no modifier-key-based temporary disabling is performed.
+ */
+function isSharedVertexDragSuppressed(event, context) {
+    const disableKey = context.snapOptions?.disableKey ?? 'alt';
+    if (disableKey === 'none')
+        return false;
+    return event.modifiers?.[disableKey] === true;
+}
+/**
+ * Reflect a vertex move state into the Store (an intermediate update during the drag; the
+ * spatial index follows the Store)
+ */
+function applyVertexMove(state, lngLat, store, writes) {
+    const feature = store.getFeature(state.featureId);
+    if (!feature)
+        return;
+    const newCoords = computeVertexMove(state, lngLat, feature);
+    writes.write(store, state.featureId, { coordinates: newCoords });
+}
+/**
+ * A vertex move. A midpoint drag continues as a vertex move of the vertex it added, and is
+ * handled the same way
+ *
+ * @internal
+ */
+export class VertexDrag {
+    constructor(type, state, 
+    /**
+     * Vertex move states of the other features that follow along during a shared-vertex move
+     *
+     * Determined at the start of a vertex drag, only when options.topology.sharedVertexDrag is
+     * enabled. It is not re-searched during the drag (to avoid interfering with other features
+     * such as snapping).
+     */
+    followers = []) {
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: type
+        });
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: state
+        });
+        Object.defineProperty(this, "followers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: followers
+        });
+    }
+    update(event, store, writes) {
+        const feature = store.getFeature(this.state.featureId);
+        if (!feature)
+            return;
+        const newCoords = computeVertexMove(this.state, event.lngLat, feature);
+        writes.write(store, this.state.featureId, { coordinates: newCoords });
+        // Preview update for the features following along through a shared vertex. They are written
+        // one at a time in the same manner as the main one (an intermediate updateFeature).
+        // The commit is the single transaction at the end of the drag.
+        for (const state of this.followers) {
+            applyVertexMove(state, event.lngLat, store, writes);
+        }
+    }
+}
+/**
+ * Start a vertex drag, and set the DragState and the followed vertices it draws from. Returns
+ * null when the feature or the vertex is gone
+ */
+export function startVertexDrag(event, featureId, vertexRef, context) {
+    const { store, spatialIndex } = context;
+    const feature = store.getFeature(featureId);
+    if (!feature)
+        return null;
+    const startLngLat = dragStartLngLat(event);
+    // Check the currently selected vertices
+    const selectedVertices = store.getSelectedVertices();
+    let vertexRefsToMove;
+    if (selectedVertices &&
+        selectedVertices.featureId === featureId &&
+        hasVertexRef(selectedVertices.vertexIndices, vertexRef)) {
+        // If the vertex being dragged is one of the selected vertices, move every selected vertex
+        // (a multiple selection spanning rings and parts can be moved as-is too)
+        vertexRefsToMove = selectedVertices.vertexIndices;
+    }
+    else {
+        // Otherwise move only the vertex being dragged
+        vertexRefsToMove = [vertexRef];
+    }
+    // Simultaneous movement of shared vertices (options.topology.sharedVertexDrag).
+    // The following set is determined at the start and is not re-searched afterwards.
+    // If the temporary-disable modifier key (the same key as for snapping) is held down, no set
+    // is built.
+    let sharedVertexStates = [];
+    if (context.topology?.sharedVertexDrag && !isSharedVertexDragSuppressed(event, context)) {
+        const shared = collectSharedVertexMoves({
+            store,
+            spatialIndex,
+            feature,
+            vertexRefs: vertexRefsToMove,
+            startLngLat,
+        });
+        vertexRefsToMove = shared.mainRefs;
+        sharedVertexStates = shared.followers;
+    }
+    const state = startVertexMove(feature, vertexRefsToMove, startLngLat);
+    if (!state)
+        return null;
+    // Write the following vertices into the UI state so they are drawn in a style distinct from
+    // the selected vertices. They are set back to null when the drag ends (endDrag / reset).
+    store.setFollowedVertices?.(sharedVertexStates.map((followerState) => ({
+        featureId: followerState.featureId,
+        vertexIndices: followerState.vertexIndices,
+    })));
+    // Set the DragState (activeVertex is the vertex the drag started from)
+    store.setDragState({
+        operation: 'vertex',
+        activeVertex: vertexRef,
+        activeFeatureId: featureId,
+    });
+    return new VertexDrag('vertex', state, sharedVertexStates);
+}
+/**
+ * Start a midpoint drag: insert a vertex at the midpoint and continue as a move of that
+ * vertex. Returns null when the feature is gone
+ */
+export function startMidpointDrag(event, featureId, after, store) {
+    const feature = store.getFeature(featureId);
+    if (!feature)
+        return null;
+    const startLngLat = dragStartLngLat(event);
+    // Add the position of the midpoint as a new vertex
+    const newCoord = [startLngLat.lng, startLngLat.lat];
+    const newCoords = addVertex(feature, after, newCoord);
+    store.updateFeature(featureId, { coordinates: newCoords });
+    // The added vertex is afterIndex + 1 in the same part and same ring
+    const newVertexRef = { ...after, index: after.index + 1 };
+    // Continue as a move operation on the added vertex
+    const updatedFeature = store.getFeature(featureId);
+    if (!updatedFeature)
+        return null;
+    const state = startVertexMove(updatedFeature, [newVertexRef], startLngLat);
+    if (!state)
+        return null;
+    return new VertexDrag('midpoint', state);
+}

package/dist/modes/select/drag-handler.d.ts

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