@sakuzu/maplibre-gl-draw 1.0.0 → 2.0.0

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

@@ -3,13 +3,13 @@
  */
 import type { DragNormalizedEvent } from '../../../dispatcher/types.js';
 import type { VertexRef } from '../../../store/types.js';
-import type { ModeContext } from '../../handler.js';
+import type { EngineModeContext } 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;
+export declare function startVertexDrag(event: DragNormalizedEvent, featureId: string, vertexRef: VertexRef, context: EngineModeContext): 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

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

@@ -2,12 +2,13 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 import { collectSharedVertexMoves } from '../../../operations/shared-vertex.js';
 import { addVertex, computeVertexMove, startVertexMove } from '../../../operations/vertex.js';
+import { geometryFromCoordinates } from '../../../shared/utils/coordinates.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).
+ * The temporary-disable key is shared with snapping (`snapping.disableKey` of the options, '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
@@ -29,7 +30,9 @@ function applyVertexMove(state, lngLat, store, writes) {
     if (!feature)
         return;
     const newCoords = computeVertexMove(state, lngLat, feature);
-    writes.write(store, state.featureId, { coordinates: newCoords });
+    writes.write(store, state.featureId, {
+        geometry: geometryFromCoordinates(feature.type, newCoords),
+    });
 }
 /**
  * A vertex move. A midpoint drag continues as a vertex move of the vertex it added, and is
@@ -71,7 +74,9 @@ export class VertexDrag {
         if (!feature)
             return;
         const newCoords = computeVertexMove(this.state, event.lngLat, feature);
-        writes.write(store, this.state.featureId, { coordinates: newCoords });
+        writes.write(store, this.state.featureId, {
+            geometry: geometryFromCoordinates(feature.type, 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.
@@ -91,14 +96,14 @@ export function startVertexDrag(event, featureId, vertexRef, context) {
         return null;
     const startLngLat = dragStartLngLat(event);
     // Check the currently selected vertices
-    const selectedVertices = store.getSelectedVertices();
+    const selectedVertices = store.getVertexSelection();
     let vertexRefsToMove;
     if (selectedVertices &&
         selectedVertices.featureId === featureId &&
-        hasVertexRef(selectedVertices.vertexIndices, vertexRef)) {
+        hasVertexRef(selectedVertices.vertices, 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;
+        vertexRefsToMove = selectedVertices.vertices;
     }
     else {
         // Otherwise move only the vertex being dragged
@@ -127,7 +132,7 @@ export function startVertexDrag(event, featureId, vertexRef, context) {
     // 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,
+        vertices: followerState.vertices,
     })));
     // Set the DragState (activeVertex is the vertex the drag started from)
     store.setDragState({
@@ -149,7 +154,7 @@ export function startMidpointDrag(event, featureId, after, store) {
     // 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 });
+    store.updateFeature(featureId, { geometry: geometryFromCoordinates(feature.type, 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

package/dist/modes/select/drag-handler.js

@@ -32,18 +32,25 @@ export class SelectModeDragHandler {
             value: new IntermediateWrites()
         });
         /**
-         * The features announced by drag:start, while drag:end has not been sent for them
+         * The features announced by drag.started, while drag.ended has not been sent for them
          *
-         * drag:end always follows, with the same IDs, whether the drag is committed or aborted, so a
-         * plugin that opens a scope on drag:start always closes it.
+         * drag.ended always follows, with the same IDs, whether the drag is committed or aborted, so
+         * a listener that opens a scope on drag.started always closes it.
          */
-        Object.defineProperty(this, "hookedFeatureIds", {
+        Object.defineProperty(this, "announcedFeatureIds", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
-        Object.defineProperty(this, "hookPluginManager", {
+        /** What the announced drag grabbed, and the emitter its end is announced on */
+        Object.defineProperty(this, "announcedKind", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "announcer", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -64,7 +71,7 @@ export class SelectModeDragHandler {
      * Start a drag operation
      */
     startDrag(hitResult, event, context, bbox) {
-        const { store, pluginManager } = context;
+        const { store } = context;
         this.scope = context.selectionScope;
         // Selection-independent auxiliary handles (getGlobalHandles) have no feature they sit on,
         // so they cannot pass the selection-bound gates (existence of a selection / bbox / feature
@@ -111,14 +118,12 @@ export class SelectModeDragHandler {
             if (!auxiliaryDrag)
                 return;
         }
-        // Notify plugins that the drag has started. Auxiliary handles are excluded: core writes no
+        // Announce that the drag has started. Auxiliary handles are excluded: core writes no
         // intermediate updates to the Store and the provider commits through its own transaction, so
-        // putting them on the editing scope of drag:start / drag:end would
+        // putting them on the editing scope of drag.started / drag.ended would
         // have the record of the commit transaction swallowed by that scope.
         if (hitResult.type !== 'auxiliary') {
-            pluginManager?.runHook('drag:start', { featureIds: [...selectedIds] }, { source: 'local' });
-            this.hookedFeatureIds = [...selectedIds];
-            this.hookPluginManager = pluginManager ?? null;
+            this.announce(hitResult.type, [...selectedIds], context.eventEmitter);
         }
         // Disable MapLibre's map dragging
         context.map.dragPan.disable();
@@ -192,7 +197,7 @@ export class SelectModeDragHandler {
      *   the last move / start event that was forwarded is used)
      */
     endDrag(context, event) {
-        const { store, pluginManager } = context;
+        const { store } = context;
         const wasAuxiliary = this.operation?.type === 'auxiliary';
         // The drag always ends: whatever the delegate, the commit or a plugin throws, map dragging
         // is re-enabled and the drag state is cleared, so that the UI never stays stuck in a drag.
@@ -201,13 +206,13 @@ export class SelectModeDragHandler {
             // nothing to the Store)
             this.operation?.finish?.(event);
             // Commit the intermediate updates made during the drag in a single transaction before
-            // notifying drag:end (plugins see the state after the commit). If no feature was touched,
-            // do nothing.
+            // announcing drag.ended (listeners see the state after the commit). If no feature was
+            // touched, do nothing.
             this.writes.commit(store);
-            // Notify plugins that the drag has ended (paired with drag:start, with the same IDs even
+            // Announce that the drag has ended (paired with drag.started, with the same IDs even
             // when the selection changed during the drag; auxiliary handles are excluded)
             if (!wasAuxiliary)
-                this.endDragHook(pluginManager);
+                this.announceEnd(false);
         }
         finally {
             // Re-enable MapLibre's map dragging
@@ -231,19 +236,33 @@ export class SelectModeDragHandler {
         this.operation = null;
         this.writes.discard(store);
         store?.setFollowedVertices?.(null);
-        // An aborted drag still closes what drag:start opened (after the features are restored)
-        this.endDragHook(this.hookPluginManager ?? undefined);
+        // An aborted drag still closes what drag.started opened (after the features are restored)
+        this.announceEnd(true);
     }
     /**
-     * Sends the drag:end that pairs with the drag:start of the current drag, once
+     * Sends the drag.ended that pairs with the drag.started of the current drag, once
      */
-    endDragHook(pluginManager) {
-        const featureIds = this.hookedFeatureIds;
-        this.hookedFeatureIds = null;
-        this.hookPluginManager = null;
-        if (!featureIds)
+    announceEnd(cancelled) {
+        const featureIds = this.announcedFeatureIds;
+        const kind = this.announcedKind;
+        const announcer = this.announcer;
+        this.announcedFeatureIds = null;
+        this.announcedKind = null;
+        this.announcer = null;
+        if (!featureIds || !kind)
             return;
-        pluginManager?.runHook('drag:end', { featureIds }, { source: 'local' });
+        announcer?.emit('drag.ended', { kind, featureIds: [...featureIds], cancelled });
+    }
+    /**
+     * Announces the start of a drag on the emitter of the instance; its end is announced with
+     * the same IDs, committed or cancelled
+     */
+    announce(type, featureIds, emitter) {
+        const kind = type === 'move' ? 'feature' : type === 'vertex' || type === 'midpoint' ? 'vertex' : 'handle';
+        this.announcedFeatureIds = [...featureIds];
+        this.announcedKind = kind;
+        this.announcer = emitter ?? null;
+        emitter?.emit('drag.started', { kind, featureIds: [...featureIds] });
     }
     /**
      * Whether a drag operation is active

package/dist/modes/select/mode.js

@@ -59,19 +59,19 @@ export class SelectMode {
             for (const id of editingIds) {
                 const feature = context.store.getFeature(id);
                 if (feature) {
-                    context.pluginManager?.notifyFeatureCreated(feature.id, feature.type);
+                    context.plugins?.notifyFeatureCreated(feature.id);
                 }
             }
             context.store.endEditing([...editingIds]);
         }
     }
     onStop() {
-        const { store, map, pluginManager } = __classPrivateFieldGet(this, _SelectMode_context, "f");
-        pluginManager?.finishPluginInteraction();
+        const { store, map, plugins } = __classPrivateFieldGet(this, _SelectMode_context, "f");
+        plugins?.finishPluginInteraction();
         __classPrivateFieldGet(this, _SelectMode_dragHandler, "f").reset(store);
         if (store.getBoxSelection())
             store.setBoxSelection(null);
-        if (store.getSelectedVertices())
+        if (store.getVertexSelection())
             store.setSelectedVertices(null);
         if (!map.dragPan.isEnabled())
             map.dragPan.enable();
@@ -102,10 +102,10 @@ export class SelectMode {
      * @returns true when there was a hit (the event is consumed)
      */
     onMouseDown(event) {
-        const { pluginManager, map, store } = __classPrivateFieldGet(this, _SelectMode_context, "f");
+        const { plugins, map, store } = __classPrivateFieldGet(this, _SelectMode_context, "f");
         // During a plugin interaction: consume clicks inside the container
-        if (pluginManager?.isPluginInteracting()) {
-            const container = pluginManager.getPluginInteractionContainer();
+        if (plugins?.isPluginInteracting()) {
+            const container = plugins.getPluginInteractionContainer();
             if (container) {
                 const target = event.originalEvent.target;
                 if (container.contains(target))
@@ -194,7 +194,7 @@ export class SelectMode {
     // Drag
     // ============================================================================
     onDragStart(event) {
-        if (__classPrivateFieldGet(this, _SelectMode_context, "f").pluginManager?.isPluginInteracting())
+        if (__classPrivateFieldGet(this, _SelectMode_context, "f").plugins?.isPluginInteracting())
             return;
         const { store, map } = __classPrivateFieldGet(this, _SelectMode_context, "f");
         // Group / layer selections are also resolved to their members (so dragging the selection box
@@ -255,7 +255,7 @@ export class SelectMode {
             return;
         const hitFeatureId = top.feature.id;
         if (!selectedIds.includes(hitFeatureId)) {
-            const filtered = __classPrivateFieldGet(this, _SelectMode_context, "f").pluginManager?.filterSelectionCandidates([hitFeatureId]) ?? [
+            const filtered = __classPrivateFieldGet(this, _SelectMode_context, "f").plugins?.filterSelectionCandidates([hitFeatureId]) ?? [
                 hitFeatureId,
             ];
             if (filtered.length === 0)
@@ -268,7 +268,7 @@ export class SelectMode {
         __classPrivateFieldGet(this, _SelectMode_dragHandler, "f").startDrag(moveHit, event, __classPrivateFieldGet(this, _SelectMode_context, "f"), bbox);
     }
     onDragMove(event) {
-        const { store, map, pluginManager } = __classPrivateFieldGet(this, _SelectMode_context, "f");
+        const { store, map, plugins } = __classPrivateFieldGet(this, _SelectMode_context, "f");
         const boxSelection = store.getBoxSelection();
         // Update the box selection
         if (boxSelection) {
@@ -278,7 +278,7 @@ export class SelectMode {
             store.setBoxSelection(updatedBoxSelection);
             // Live selection preview (a frame that selects the same features changes nothing)
             const hitIds = queryFeaturesInBox(updatedBoxSelection, __classPrivateFieldGet(this, _SelectMode_context, "f"));
-            const filtered = hitIds.length > 0 ? (pluginManager?.filterSelectionCandidates(hitIds) ?? hitIds) : hitIds;
+            const filtered = hitIds.length > 0 ? (plugins?.filterSelectionCandidates(hitIds) ?? hitIds) : hitIds;
             if (!selectsExactly(store.getSelection(), filtered)) {
                 if (filtered.length === 0) {
                     store.setSelection(null, []);
@@ -294,12 +294,12 @@ export class SelectMode {
         }
     }
     onDragEnd(event) {
-        const { store, map, pluginManager } = __classPrivateFieldGet(this, _SelectMode_context, "f");
+        const { store, map, plugins } = __classPrivateFieldGet(this, _SelectMode_context, "f");
         const boxSelection = store.getBoxSelection();
         // Commit the box selection
         if (boxSelection) {
             const hitIds = queryFeaturesInBox(boxSelection, __classPrivateFieldGet(this, _SelectMode_context, "f"));
-            const filtered = hitIds.length > 0 ? (pluginManager?.filterSelectionCandidates(hitIds) ?? hitIds) : hitIds;
+            const filtered = hitIds.length > 0 ? (plugins?.filterSelectionCandidates(hitIds) ?? hitIds) : hitIds;
             if (filtered.length === 0) {
                 store.setSelection(null, []);
             }
@@ -345,11 +345,11 @@ export class SelectMode {
     // Keyboard / MouseMove
     // ============================================================================
     onKeyDown(event) {
-        const { pluginManager, store } = __classPrivateFieldGet(this, _SelectMode_context, "f");
+        const { plugins, store } = __classPrivateFieldGet(this, _SelectMode_context, "f");
         // Skip destructive key operations during a plugin interaction
-        if (pluginManager?.isPluginInteracting()) {
+        if (plugins?.isPluginInteracting()) {
             if (event.key === 'Escape') {
-                pluginManager.cancelPluginInteraction();
+                plugins.cancelPluginInteraction();
             }
             return;
         }
@@ -388,7 +388,7 @@ export class SelectMode {
         }
     }
     onMouseMove(event) {
-        if (__classPrivateFieldGet(this, _SelectMode_dragHandler, "f").isActive() || __classPrivateFieldGet(this, _SelectMode_context, "f").pluginManager?.isPluginInteracting()) {
+        if (__classPrivateFieldGet(this, _SelectMode_dragHandler, "f").isActive() || __classPrivateFieldGet(this, _SelectMode_context, "f").plugins?.isPluginInteracting()) {
             return;
         }
         updateCursorForSelection(event, __classPrivateFieldGet(this, _SelectMode_context, "f"), __classPrivateFieldGet(this, _SelectMode_config, "f"));

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

@@ -1,11 +1,11 @@
-import type { ModeContext } from '../handler.js';
+import type { EngineModeContext } from '../handler.js';
 /**
  * Handling of the group shortcut (Cmd+G / Ctrl+G).
  *
  * The behavior is identical to the API's groupSelection (the key, the menu and the API place the
  * new group at the same position).
  */
-export declare function handleGroupShortcut(context: ModeContext): void;
+export declare function handleGroupShortcut(context: EngineModeContext): void;
 /**
  * Handling of the ungroup shortcut (Shift+Cmd+G / Shift+Ctrl+G).
  *
@@ -13,12 +13,12 @@ export declare function handleGroupShortcut(context: ModeContext): void;
  * consistent): a group selection is dissolved, and for a member feature selection only that
  * member leaves.
  */
-export declare function handleUngroupShortcut(context: ModeContext): void;
+export declare function handleUngroupShortcut(context: EngineModeContext): void;
 /**
- * Handling of the Delete / Backspace key: deletes what is selected, exactly like
- * `draw.deleteSelection()` (vertices, features, groups or layers; locked items are kept).
+ * Handling of the Delete / Backspace key: deletes what is selected (vertices, features, groups
+ * or layers; locked items are kept) with `deleteSelection` of `operations/`.
  */
-export declare function handleDeleteShortcut(context: ModeContext): void;
+export declare function handleDeleteShortcut(context: EngineModeContext): void;
 /**
  * Handling of the arrow keys: moves the selected features by a few pixels on the screen
  *
@@ -28,7 +28,7 @@ export declare function handleDeleteShortcut(context: ModeContext): void;
  * @returns whether the key was used (a selection was moved); otherwise the key is left to
  *   the map (MapLibre pans with it)
  */
-export declare function handleNudgeShortcut(context: ModeContext, key: string, modifiers: {
+export declare function handleNudgeShortcut(context: EngineModeContext, key: string, modifiers: {
     shift: boolean;
     ctrl: boolean;
     alt: boolean;
@@ -37,4 +37,4 @@ export declare function handleNudgeShortcut(context: ModeContext, key: string, m
 /**
  * Handling of the Escape key
  */
-export declare function handleEscapeShortcut(context: ModeContext): void;
+export declare function handleEscapeShortcut(context: EngineModeContext): void;

package/dist/modes/select/shortcut-handler.js

@@ -7,7 +7,7 @@
  */
 import { groupSelection, ungroupSelection } from '../../operations/layer-operations.js';
 import { deleteSelection } from '../../operations/selection-operations.js';
-import { mapCoordinatesDeep } from '../../shared/utils/coordinates.js';
+import { coordinatesOf, geometryFromCoordinates, mapCoordinatesDeep, } from '../../shared/utils/coordinates.js';
 import { isInteractionBlocked } from '../../store/lock.js';
 import { getSelectedFeatureIds } from '../../view/ui/helper.js';
 /** The distance an arrow key moves the selection (pixels; with Shift, NUDGE_LARGE) */
@@ -46,8 +46,8 @@ export function handleUngroupShortcut(context) {
     ungroupSelection(store);
 }
 /**
- * Handling of the Delete / Backspace key: deletes what is selected, exactly like
- * `draw.deleteSelection()` (vertices, features, groups or layers; locked items are kept).
+ * Handling of the Delete / Backspace key: deletes what is selected (vertices, features, groups
+ * or layers; locked items are kept) with `deleteSelection` of `operations/`.
  */
 export function handleDeleteShortcut(context) {
     deleteSelection(context.store);
@@ -75,7 +75,7 @@ export function handleNudgeShortcut(context, key, modifiers) {
         return false;
     // One offset in degrees for every feature, taken at a point of the selection, so the
     // features keep their relative placement (the same translation as a move drag)
-    const reference = firstCoordinate(features[0].coordinates);
+    const reference = firstCoordinate(coordinatesOf(features[0]));
     if (!reference)
         return false;
     const step = modifiers.shift ? NUDGE_LARGE : NUDGE_SMALL;
@@ -85,8 +85,10 @@ export function handleNudgeShortcut(context, key, modifiers) {
     const dy = to.lat - reference[1];
     store.transact(() => {
         for (const feature of features) {
-            const coordinates = mapCoordinatesDeep(feature.coordinates, (c) => [c[0] + dx, c[1] + dy]);
-            store.updateFeature(feature.id, { coordinates });
+            const coordinates = mapCoordinatesDeep(coordinatesOf(feature), (c) => [c[0] + dx, c[1] + dy]);
+            store.updateFeature(feature.id, {
+                geometry: geometryFromCoordinates(feature.type, coordinates),
+            });
         }
     });
     return true;
@@ -118,7 +120,7 @@ export function handleEscapeShortcut(context) {
         return;
     }
     // Clear the vertex selection when vertices are selected
-    const selectedVertices = store.getSelectedVertices();
+    const selectedVertices = store.getVertexSelection();
     if (selectedVertices) {
         store.setSelectedVertices(null);
         return;