@open-pioneer/selection 1.4.0 → 1.5.0-dev.20260910103330

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @open-pioneer/selection
 
+## 1.5.0-dev.20260910103330
+
+### Minor Changes
+
+- f790fda: Update to Chakra 3.37.0
+- fab4c36: Add the map model to the context of the selection source's `select` method.
+- fab4c36: Add support for an `id` property on the selection source interface to identify sources. The property remains optional for the time being to preserve backwards compatibility.
+
+### Patch Changes
+
+- 3203815: Update code to match new react linting rules from oxlint.
+- fab4c36: Cancel selection requests that are no longer needed.
+  If the user starts another selection while a request is still running, the previous request is cancelled
+  and only the results of the most recent selection are used.
+- fab4c36: Use `synchronized` to watch the vector layer's visibility.
+- fab4c36: Refactor internal state management.
+- 09ec7c7: Updated dependencies
+
 ## 1.4.0
 
 ### Minor Changes
@@ -78,17 +96,17 @@
 - 193068a: Deprecate the `mapId` property on React components.
   Use the `MapModel` directly instead to pass a reference to the map.
 
-    Example:
+  Example:
 
-    ```tsx
-    // Default map for entire component tree
-    <DefaultMapProvider map={mapModel}>
-        <Toc />
-    </DefaultMapProvider>
+  ```tsx
+  // Default map for entire component tree
+  <DefaultMapProvider map={mapModel}>
+      <Toc />
+  </DefaultMapProvider>
 
-    // Map for specific component
-    <Toc map={mapModel} />
-    ```
+  // Map for specific component
+  <Toc map={mapModel} />
+  ```
 
 ### Patch Changes
 
@@ -109,33 +127,33 @@
 - e7978a8: Support reactive changes on the `SelectionSource`'s `status` property using the reactivity API.
   **Remove** support for the `changed:status"` event on the selection source: use signals instead.
 
-    For example, to implement a `SelectionSource` with changing availability:
+  For example, to implement a `SelectionSource` with changing availability:
 
-    ```ts
-    class MySelectionSource implements SelectionSource {
-        private _status = reactive("available");
+  ```ts
+  class MySelectionSource implements SelectionSource {
+    private _status = reactive("available");
 
-        label = "My selection source";
+    label = "My selection source";
 
-        get status() {
-            return this._status.value;
-        }
+    get status() {
+      return this._status.value;
+    }
 
-        someEventHandler() {
-            // Change the status by updating the signal's value.
-            // The UI will update automatically.
-            this._status.value = "unavailable";
-        }
+    someEventHandler() {
+      // Change the status by updating the signal's value.
+      // The UI will update automatically.
+      this._status.value = "unavailable";
     }
-    ```
+  }
+  ```
 
 - b717121: Update from OL 9 to OL 10.
 - b717121: Adjust the type the property `vectorLayer` of the exported interface `VectorLayerSelectionSourceOptions`.
   The type is now `VectorLayer<VectorSource, Feature>` instead of `VectorLayer<Feature>`.
 - 2fa8020: Update trails core package dependencies.
-    - Also updates Chakra UI to the latest 2.x version and Chakra React Select to version 5.
-    - Removes any obsolete references to `@chakra-ui/system`.
-      This dependency seems to be no longer required and may lead to duplicate packages in your dependency tree.
+  - Also updates Chakra UI to the latest 2.x version and Chakra React Select to version 5.
+  - Removes any obsolete references to `@chakra-ui/system`.
+    This dependency seems to be no longer required and may lead to duplicate packages in your dependency tree.
 
 ### Patch Changes
 
@@ -153,7 +171,7 @@
 - 583f1d6: The `mapId` or `map` properties are now optional on individual components.
   You can use the `DefaultMapProvider` to configure an implicit default value.
 
-    Note that configuring _neither_ a default _nor_ an explicit `map` or `mapId` will trigger a runtime error.
+  Note that configuring _neither_ a default _nor_ an explicit `map` or `mapId` will trigger a runtime error.
 
 - 583f1d6: All UI components in this project now accept the `mapId` (a `string`) _or_ the `map` (a `MapModel`) directly.
 - a8b3449: Switch to a new versioning strategy.
@@ -175,8 +193,8 @@
 - 28e092a: Update dependencies
 - 28e092a: Adapt to OpenLayers type changes.
 
-    When creating a selection source for a `VectorLayer`, the precise type of that vector layer must now be `VectorLayer<Feature>` (instead of `VectorLayer<VectorSource>`).
-    This is a TypeScript-only change that has no effects on the JavaScript code at runtime.
+  When creating a selection source for a `VectorLayer`, the precise type of that vector layer must now be `VectorLayer<Feature>` (instead of `VectorLayer<VectorSource>`).
+  This is a TypeScript-only change that has no effects on the JavaScript code at runtime.
 
 - 65a14f4: Open select-menu on enter (fixes issue [#320](https://github.com/open-pioneer/trails-openlayers-base-packages/issues/320))
 - 484ad86: Add tooltip role to tooltip divs (See https://github.com/open-pioneer/trails-openlayers-base-packages/issues/309).

package/README.md

@@ -44,22 +44,28 @@ To provide the selection sources that are used by the selection-UI component, im
 ```tsx
 import {
     Selection,
+    SelectionKind,
+    SelectionOptions,
     SelectionResult,
     SelectionSource,
     SelectionSourceStatus
 } from "@open-pioneer/selection";
-import { MAP_ID } from "./MapConfigProviderImpl";
 
 class MySelectionSource implements SelectionSource {
+    // The optional id of this source. It must be unique among the sources used by the same
+    // selection component and it must not change. If no id is defined, the selection component
+    // generates one internally.
+    id = "my-sample-rest-service";
+
     // The label of this source, used as a title for this source's results.
     label = "My sample REST-Service";
 
     // The optional status of this source. If there is no status defined, it is assumed that the source is always available.
+    // Use the object form (`{ kind: "unavailable", reason: "..." }`) to tell the user why the source is
+    // not available; if no reason is given, the i18n value for "sourceNotAvailable" is displayed.
+    // This value may be reactive: changes are reflected in the UI.
     status?: SelectionSourceStatus;
 
-    // The reason that the source is not available. If it is not defined, the i18n value for "sourceNotAvailable" will be displayed
-    unavailableStatusReason?: string;
-
     // Performs a selection with a given selectionKind and returns a list of selection results.
     // see the API documentation of `SelectionSource`.
     select(selectionKind: SelectionKind, options: SelectionOptions): Promise<SelectionResult[]> {}
@@ -79,9 +85,8 @@ the provided service `VectorSelectionSourceFactory` can be used to create an ins
 Key features of this selection source implementation are:
 
 - using only the extent as selection kind
-- listening to layer visibility changes and updating the status of the source
+- listening to layer visibility changes and updating the reactive `status` of the source accordingly
 - limiting the number of returned selection results to the corresponding selection option
-- throwing an event `changed:status` when the status updates
 
 Inject the selection source factory by referencing `"selection.VectorSelectionSourceFactory"`:
 
@@ -106,13 +111,27 @@ and create a selection source instance:
 ```ts
 const vectorSelectionSourceFactory = this._vectorSelectionSourceFactory; // injected
 const layerSelectionSource = vectorSelectionSourceFactory.createSelectionSource({
+    id: "my-vector-layer", // optional, see "Implementing a selection source"
     vectorLayer: vectorLayer,
     label: "My Vector Layer Title shown in UI"
 });
+```
 
-const eventHandler = layerSelectionSource.on("changed:status", () => {
-    // do something (e.g. like removing map highlighting if unavailable)
-});
+The `status` of the source is reactive: it changes when the visibility of the layer changes.
+To react to those changes, watch the value using the reactivity API:
+
+```ts
+import { watchValue } from "@conterra/reactivity-core";
+
+const handle = watchValue(
+    () => layerSelectionSource.status,
+    (status) => {
+        // do something (e.g. like removing map highlighting if unavailable)
+    }
+);
+
+// later, when you are no longer interested in the status:
+handle.destroy();
 ```
 
 ## License

package/_virtual/hooks.js

@@ -1,4 +1,4 @@
-import { useIntlInternal, useServiceInternal } from '@open-pioneer/runtime/react-integration';
+import { useServiceInternal, useIntlInternal } from '@open-pioneer/runtime/react-integration';
 
 const PACKAGE_NAME = "@open-pioneer/selection";
 const useService = /*@__PURE__*/ useServiceInternal.bind(undefined, PACKAGE_NAME);

package/_virtual/source-info.js

@@ -1,4 +1,4 @@
-const sourceId = "@open-pioneer/selection/SelectionController";
+const sourceId = "@open-pioneer/selection/model/SelectionViewModel";
 
 export { sourceId };
 //# sourceMappingURL=source-info.js.map

package/api.d.ts

@@ -1,5 +1,5 @@
 import type { Resource } from "@open-pioneer/core";
-import { BaseFeature } from "@open-pioneer/map";
+import { BaseFeature, MapModel } from "@open-pioneer/map";
 import { DeclaredService } from "@open-pioneer/runtime";
 import type { Extent } from "ol/extent";
 import Feature from "ol/Feature";
@@ -52,9 +52,17 @@ export interface SelectionOptions {
      * Useful to return the selection result's geometry in the suitable projection, should they differ.
      */
     mapProjection: Projection;
+    /**
+     * The map model of the map associated with the selection.
+     */
+    map: MapModel;
     /**
      * The signal can be used to detect cancellation.
      *
+     * The signal is aborted when the results of this selection are no longer needed,
+     * for example because the user started another selection in the meantime
+     * or because the selection widget has been destroyed.
+     *
      * You can pass this signal to builtin functions like `fetch` that automatically
      * support cancellation.
      */
@@ -83,6 +91,15 @@ export type SelectionKind = ExtentSelection;
  * Developers can create classes that implement this interface for different selection sources.
  */
 export interface SelectionSource {
+    /**
+     * The id of this source.
+     *
+     * Must be unique across all selection sources used within the same selection component.
+     *
+     * The id must not change while the source is in use (this value is not reactive).
+     * If no id is defined, the selection component generates one internally.
+     */
+    readonly id?: string;
     /**
      * The label of this source.
      *
@@ -103,6 +120,12 @@ export interface SelectionSource {
      *
      * Implementations should return the results ordered by priority (best match first), if possible.
      *
+     * The provided `AbortSignal` in `options.signal` is used to cancel outdated requests.
+     *
+     * NOTE: If your selection source implements custom error handling (i.e. `try`/`catch`), it is
+     * good practice to forward abort errors without modification. This will enable the selection
+     * widget to differentiate real errors from cancellations.
+     *
      * @param selectionKind The geometry with which to perform the spatial selection. Currently only
      * an extent is supported.
      * @param options see interface documentation {@link SelectionOptions}
@@ -110,10 +133,12 @@ export interface SelectionSource {
     select(selectionKind: SelectionKind, options: SelectionOptions): Promise<SelectionResult[]>;
 }
 export interface VectorLayerSelectionSourceOptions {
+    id?: string;
     vectorLayer: VectorLayer<VectorSource, Feature>;
     label: string;
 }
-export interface VectorLayerSelectionSource extends Required<SelectionSource>, Resource {
+export interface VectorLayerSelectionSource extends SelectionSource, Resource {
+    readonly status: SelectionSourceStatus;
 }
 /**
  * A factory that creates {@link VectorLayerSelectionSource | selection sources} to be used on an

package/i18n/de.yaml

@@ -1,9 +1,4 @@
 messages:
-  selectMethod: "Methode auswählen"
-  EXTENT: "Rechteck"
-  POLYGON: "Polygon"
-  FREEPOLYGON: "Freies Zeichnen"
-  CIRCLE: "Kreis"
   selectSource: "Quelle auswählen"
   tooltip: "Klicken Sie in die Karte, halten Sie die Maustaste gedrückt und ziehen Sie ein Rechteck auf"
   disabledTooltip: "Die aktuelle Selektionsquelle ist nicht verfügbar."
@@ -12,4 +7,3 @@ messages:
   selectionFailed: "Die räumliche Auswahl ist fehlgeschlagen"
   selectionPlaceholder: "Keine Quelle ausgewählt"
   layerNotVisibleReason: "Zugehöriger Layer ist nicht sichtbar."
-  selected: "selektiert"

package/i18n/en.yaml

@@ -1,9 +1,4 @@
 messages:
-  selectMethod: Select method
-  EXTENT: "Rechteck"
-  POLYGON: "Polygon"
-  FREEPOLYGON: "Freies Zeichnen"
-  CIRCLE: "Kreis"
   selectSource: "Select source"
   tooltip: "Click on the map, hold down the mouse button and draw a rectangle"
   disabledTooltip: "The current selection source is not available"
@@ -12,4 +7,3 @@ messages:
   selectionFailed: "Spatial selection failed"
   selectionPlaceholder: "No source selected"
   layerNotVisibleReason: "Matching layer is not visible."
-  selected: "selected"

package/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./api";
-export { Selection, type SelectionProps, type SelectionCompleteEvent, type SelectionSourceChangedEvent } from "./Selection";
+export { Selection, type SelectionCompleteEvent, type SelectionProps, type SelectionSourceChangedEvent } from "./ui/Selection";

package/index.js

@@ -1,2 +1,2 @@
-export { Selection } from './Selection.js';
+export { Selection } from './ui/Selection.js';
 //# sourceMappingURL=index.js.map

package/interactions/ExtentSelectionInteraction.d.ts

@@ -0,0 +1,12 @@
+import { MapModel } from "@open-pioneer/map";
+import { Geometry } from "ol/geom";
+/**
+ * Registers interactions on the map for extent selection.
+ *
+ * Calls `onSuccess` whenever the user selected an extent.
+ */
+export declare class ExtentSelectionInteraction {
+    #private;
+    constructor(map: MapModel, onSuccess: (geometry: Geometry) => void);
+    destroy(): void;
+}

package/interactions/ExtentSelectionInteraction.js

@@ -0,0 +1,57 @@
+import { destroyResources } from '@open-pioneer/core';
+import { mouseActionButton } from 'ol/events/condition.js';
+import { DragBox, DragPan } from 'ol/interaction.js';
+
+class ExtentSelectionInteraction {
+  #map;
+  #onSuccess;
+  #resources;
+  constructor(map, onSuccess) {
+    this.#map = map;
+    this.#onSuccess = onSuccess;
+    this.#resources = [
+      createDragboxInteraction(this.#map, this.#onSuccess),
+      createPanningInteraction(this.#map)
+    ];
+  }
+  destroy() {
+    destroyResources(this.#resources);
+  }
+}
+function createDragboxInteraction(map, onSuccess) {
+  const olMap = map.olMap;
+  const dragbox = new DragBox({
+    className: "selection-drag-box",
+    condition: mouseActionButton
+  });
+  dragbox.on("boxend", function() {
+    onSuccess(dragbox.getGeometry());
+  });
+  olMap.addInteraction(dragbox);
+  return {
+    destroy() {
+      olMap.removeInteraction(dragbox);
+      dragbox.dispose();
+    }
+  };
+}
+function createPanningInteraction(map) {
+  const olMap = map.olMap;
+  const rightClick = (mapBrowserEvent) => {
+    const originalEvent = mapBrowserEvent.originalEvent;
+    return "button" in originalEvent && originalEvent.button === 2;
+  };
+  const drag = new DragPan({
+    condition: rightClick
+  });
+  olMap.addInteraction(drag);
+  return {
+    destroy() {
+      olMap.removeInteraction(drag);
+      drag.dispose();
+    }
+  };
+}
+
+export { ExtentSelectionInteraction };
+//# sourceMappingURL=ExtentSelectionInteraction.js.map

package/interactions/ExtentSelectionInteraction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExtentSelectionInteraction.js","sources":["ExtentSelectionInteraction.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\n\nimport { destroyResources, Resource } from \"@open-pioneer/core\";\nimport { MapModel } from \"@open-pioneer/map\";\nimport { mouseActionButton } from \"ol/events/condition\";\nimport { Geometry } from \"ol/geom\";\nimport { DragBox, DragPan } from \"ol/interaction\";\nimport MapBrowserEvent from \"ol/MapBrowserEvent\";\n\n/**\n * Registers interactions on the map for extent selection.\n *\n * Calls `onSuccess` whenever the user selected an extent.\n */\nexport class ExtentSelectionInteraction {\n    #map: MapModel;\n    #onSuccess: (geometry: Geometry) => void;\n\n    #resources: Resource[];\n\n    constructor(map: MapModel, onSuccess: (geometry: Geometry) => void) {\n        this.#map = map;\n        this.#onSuccess = onSuccess;\n\n        this.#resources = [\n            createDragboxInteraction(this.#map, this.#onSuccess),\n            createPanningInteraction(this.#map)\n        ];\n    }\n\n    destroy() {\n        destroyResources(this.#resources);\n    }\n}\n\nfunction createDragboxInteraction(\n    map: MapModel,\n    onSuccess: (geometry: Geometry) => void\n): Resource {\n    const olMap = map.olMap;\n    const dragbox = new DragBox({\n        className: \"selection-drag-box\",\n        condition: mouseActionButton\n    });\n    dragbox.on(\"boxend\", function () {\n        onSuccess(dragbox.getGeometry());\n    });\n\n    olMap.addInteraction(dragbox);\n    return {\n        destroy() {\n            olMap.removeInteraction(dragbox);\n            dragbox.dispose();\n        }\n    };\n}\n\n// For panning using the right mouse button during selection interaction\nfunction createPanningInteraction(map: MapModel): Resource {\n    const olMap = map.olMap;\n    const rightClick = (mapBrowserEvent: MapBrowserEvent) => {\n        const originalEvent = mapBrowserEvent.originalEvent;\n        return \"button\" in originalEvent && originalEvent.button === 2;\n    };\n    const drag = new DragPan({\n        condition: rightClick\n    });\n\n    olMap.addInteraction(drag);\n    return {\n        destroy() {\n            olMap.removeInteraction(drag);\n            drag.dispose();\n        }\n    };\n}\n"],"names":[],"mappings":";;;;AAeO,MAAM,0BAAA,CAA2B;AAAA,EACpC,IAAA;AAAA,EACA,UAAA;AAAA,EAEA,UAAA;AAAA,EAEA,WAAA,CAAY,KAAe,SAAA,EAAyC;AAChE,IAAA,IAAA,CAAK,IAAA,GAAO,GAAA;AACZ,IAAA,IAAA,CAAK,UAAA,GAAa,SAAA;AAElB,IAAA,IAAA,CAAK,UAAA,GAAa;AAAA,MACd,wBAAA,CAAyB,IAAA,CAAK,IAAA,EAAM,IAAA,CAAK,UAAU,CAAA;AAAA,MACnD,wBAAA,CAAyB,KAAK,IAAI;AAAA,KACtC;AAAA,EACJ;AAAA,EAEA,OAAA,GAAU;AACN,IAAA,gBAAA,CAAiB,KAAK,UAAU,CAAA;AAAA,EACpC;AACJ;AAEA,SAAS,wBAAA,CACL,KACA,SAAA,EACQ;AACR,EAAA,MAAM,QAAQ,GAAA,CAAI,KAAA;AAClB,EAAA,MAAM,OAAA,GAAU,IAAI,OAAA,CAAQ;AAAA,IACxB,SAAA,EAAW,oBAAA;AAAA,IACX,SAAA,EAAW;AAAA,GACd,CAAA;AACD,EAAA,OAAA,CAAQ,EAAA,CAAG,UAAU,WAAY;AAC7B,IAAA,SAAA,CAAU,OAAA,CAAQ,aAAa,CAAA;AAAA,EACnC,CAAC,CAAA;AAED,EAAA,KAAA,CAAM,eAAe,OAAO,CAAA;AAC5B,EAAA,OAAO;AAAA,IACH,OAAA,GAAU;AACN,MAAA,KAAA,CAAM,kBAAkB,OAAO,CAAA;AAC/B,MAAA,OAAA,CAAQ,OAAA,EAAQ;AAAA,IACpB;AAAA,GACJ;AACJ;AAGA,SAAS,yBAAyB,GAAA,EAAyB;AACvD,EAAA,MAAM,QAAQ,GAAA,CAAI,KAAA;AAClB,EAAA,MAAM,UAAA,GAAa,CAAC,eAAA,KAAqC;AACrD,IAAA,MAAM,gBAAgB,eAAA,CAAgB,aAAA;AACtC,IAAA,OAAO,QAAA,IAAY,aAAA,IAAiB,aAAA,CAAc,MAAA,KAAW,CAAA;AAAA,EACjE,CAAA;AACA,EAAA,MAAM,IAAA,GAAO,IAAI,OAAA,CAAQ;AAAA,IACrB,SAAA,EAAW;AAAA,GACd,CAAA;AAED,EAAA,KAAA,CAAM,eAAe,IAAI,CAAA;AACzB,EAAA,OAAO;AAAA,IACH,OAAA,GAAU;AACN,MAAA,KAAA,CAAM,kBAAkB,IAAI,CAAA;AAC5B,MAAA,IAAA,CAAK,OAAA,EAAQ;AAAA,IACjB;AAAA,GACJ;AACJ;;;;"}

package/model/SelectionViewModel.d.ts

@@ -0,0 +1,30 @@
+import { MapModel } from "@open-pioneer/map";
+import { SelectionResult, SelectionSource, SelectionSourceStatusObject } from "../api";
+export interface Messages {
+    active: string;
+    inactive: string;
+    noSource: string;
+}
+export declare class SelectionViewModel {
+    #private;
+    constructor(options: {
+        map: MapModel;
+        messages: Messages;
+        onSelectionComplete: (source: SelectionSource, results: SelectionResult[]) => void;
+        onError: () => void;
+        maxResults?: number;
+    });
+    destroy(): void;
+    get sources(): SelectionSource[];
+    set sources(newSources: SelectionSource[]);
+    get currentSource(): SelectionSource | undefined;
+    set currentSource(source: SelectionSource | undefined);
+    /** Returns true if the selection interaction is currently active. */
+    get isInteractionActive(): boolean;
+    /** Aria message to represent the current state. Also serves as the tooltip text. */
+    get ariaMessage(): string;
+}
+/**
+ * Normalizes the source's status into an object.
+ */
+export declare function getSourceStatus(source: SelectionSource): SelectionSourceStatusObject;