Merge branch 'map/feature/area-measurements' of github.com:EOX-A/EOxE…

…lements into map/feature/area-measurements

.github/workflows/check_formatting.yml

@@ -31,7 +31,7 @@ jobs:
           check-latest: true
 
       - name: Cache node_modules 📦
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

.github/workflows/check_linting.yml

@@ -31,7 +31,7 @@ jobs:
           check-latest: true
 
       - name: Cache node_modules 📦
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

.github/workflows/run_tests.yml

@@ -34,7 +34,7 @@ jobs:
           check-latest: true
 
       - name: Cache node_modules 📦
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

.release-please-manifest.json

@@ -1,5 +1,5 @@
 {
-  "elements/drawtools": "0.10.0",
+  "elements/drawtools": "0.11.0",
   "elements/itemfilter": "1.4.0",
   "elements/layercontrol": "0.23.0",
   "elements/map": "1.16.1",

elements/drawtools/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.11.0](https://github.com/EOX-A/EOxElements/compare/drawtools-v0.10.0...drawtools-v0.11.0) (2024-10-22)
+
+
+### Features
+
+* Introduce Vector Layer feature selection ([#1317](https://github.com/EOX-A/EOxElements/issues/1317)) ([19eb75a](https://github.com/EOX-A/EOxElements/commit/19eb75a71f1e17aec03c0346eee4b4a322483711))
+
 ## [0.10.0](https://github.com/EOX-A/EOxElements/compare/drawtools-v0.9.0...drawtools-v0.10.0) (2024-10-17)
 
 

elements/drawtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eox/drawtools",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "type": "module",
   "devDependencies": {
     "ol": "^10.0.0",

elements/drawtools/src/components/controller.js

@@ -17,6 +17,7 @@ export class EOxDrawToolsController extends LitElement {
     drawnFeatures: { attribute: false, state: true, type: Array },
     currentlyDrawing: { attribute: false, state: true, type: Boolean },
     drawFunc: { attribute: false, type: Object },
+    select: { type: Boolean },
     importFeatures: { attribute: "import-features", type: Boolean },
     showEditor: { attribute: "show-editor", type: Boolean },
     geoJSON: { attribute: "geo-json", type: String },
@@ -81,6 +82,11 @@ export class EOxDrawToolsController extends LitElement {
      * Render the element without additional styles
      */
     this.unstyled = false;
+
+    /**
+     *
+     */
+    this.select = false;
   }
 
   /**
@@ -115,7 +121,7 @@ export class EOxDrawToolsController extends LitElement {
           <!-- Draw Button -->
           <button
             data-cy="drawBtn"
-            class="polygon icon"
+            class="${this.select ? "pointer" : "polygon"} icon"
             ?disabled="${this.#drawDisabled || nothing}"
             @click="${() => this.drawFunc.start()}"
           >

elements/drawtools/src/components/list.js

@@ -113,7 +113,7 @@ export class EOxDrawToolsList extends LitElement {
 
   /**
    *
-   * @param {Number} featureId - The ID of the feature to hover.
+   * @param {number | string | undefined} featureId - The ID of the feature to hover.
    * @param {Boolean} mouseOut - Flag indicating mouse out event.
    */
   _handleHoverFeature(featureId, mouseOut = false) {
@@ -147,7 +147,7 @@ export class EOxDrawToolsList extends LitElement {
         ${this.drawnFeatures.map((feature, i) => {
           // Determine feature number and ID
           const featureNumber = i + 1;
-          const featureId = feature.get("id");
+          const featureId = feature.getId();
 
           // Check if the feature is hovered or clicked
           const isFeatureHovered = this.hoverId === featureId;

elements/drawtools/src/enums/index.js

@@ -2,6 +2,7 @@ export {
   STORIES_MAP_STYLE,
   STORIES_DRAW_TYPES,
   STORIES_LAYERS_ARRAY,
+  STORIES_VECTOR_LAYERS,
 } from "./stories";
 
 export { FIT_OPTIONS, DUMMY_GEO_JSON } from "./draw";

elements/drawtools/src/enums/stories.js

@@ -7,6 +7,27 @@ export const STORIES_LAYERS_ARRAY = [
   },
 ];
 
+export const STORIES_VECTOR_LAYERS = [
+  {
+    type: "Vector",
+    background: "lightgrey",
+    properties: {
+      id: "regions",
+    },
+    source: {
+      type: "Vector",
+      url: "https://openlayers.org/data/vector/ecoregions.json",
+      format: "GeoJSON",
+      attributions: "Regions: @ openlayers.org",
+    },
+    style: {
+      "stroke-color": "black",
+      "stroke-width": 1,
+      "fill-color": "darkgrey",
+    },
+  },
+];
+
 export const STORIES_MAP_STYLE = "width: 400px; height: 300px;";
 
 export const STORIES_DRAW_TYPES = [

elements/drawtools/src/main.js

@@ -7,6 +7,8 @@ import {
   initLayerMethod,
   discardDrawingMethod,
   emitDrawnFeaturesMethod,
+  createSelectHandler,
+  handleLayerId,
 } from "./methods/draw";
 import mainStyle from "@eox/elements-utils/styles/dist/main.style";
 import { DUMMY_GEO_JSON } from "./enums/index.js";
@@ -29,6 +31,7 @@ export class EOxDrawTools extends LitElement {
       currentlyDrawing: { attribute: false, state: true, type: Boolean },
       draw: { attribute: false, state: true },
       drawLayer: { attribute: false, state: true },
+      layerId: { attribute: "layer-id", type: String },
       drawnFeatures: { attribute: false, state: true, type: Array },
       modify: { attribute: false, state: true },
       multipleFeatures: { attribute: "multiple-features", type: Boolean },
@@ -42,7 +45,7 @@ export class EOxDrawTools extends LitElement {
   }
 
   /**
-   * @type import("../../map/main").EOxMap
+   * @type import("../../map/src/main").EOxMap
    */
   #eoxMap;
 
@@ -56,6 +59,11 @@ export class EOxDrawTools extends LitElement {
    */
   #geoJSON;
 
+  /**
+   * @type string
+   */
+  #layerId;
+
   constructor() {
     super();
 
@@ -79,17 +87,22 @@ export class EOxDrawTools extends LitElement {
 
     /**
      * The current native OpenLayers `draw` interaction
-     * @type import("ol/interaction").Draw
+     * @type import("ol/interaction").Draw | import("@eox/map/src/helpers").EOxSelectInteraction
      */
     this.draw = null;
 
     /**
      * The current native OpenLayers draw `layer`
-     * @type import("ol/layer/Vector").default<import("ol/Feature").default>
+     * @type import("ol/layer/Vector").default
      */
 
     this.drawLayer = null;
 
+    /**
+     * The ID of the Vector/Vector Tile Layer that contains features to be selected
+     */
+    this.layerId = "";
+
     /**
      * The array of drawn native OpenLayers features. Normally includes only one feature, until multiple feature drawing is enabled.
      * @type Array<import("ol").Feature>
@@ -139,20 +152,38 @@ export class EOxDrawTools extends LitElement {
      * @type {Boolean}
      */
     this.noShadow = false;
+    /**
+     * @type {ReturnType<typeof import("./methods/draw/create-select-handler").default>}
+     */
+    this.selectionEvents = null;
+  }
+
+  /**
+   *
+   *
+   * @type {string}
+   */
+  set layerId(value) {
+    handleLayerId(this, this.eoxMap, value, this.#layerId);
+    this.#layerId = value;
+  }
+
+  get layerId() {
+    return this.#layerId;
   }
 
   /**
    * @onClick Event handler triggered to start drawing on the map.
    */
-  handleStartDrawing() {
+  startDrawing() {
     startDrawingMethod(this);
   }
 
   /**
    * @onClick Event handler triggered to discard/stop drawing
    * on the map and delete the drawn shapes.
    */
-  handleDiscardDrawing() {
+  discardDrawing() {
     discardDrawingMethod(this);
   }
 
@@ -164,6 +195,7 @@ export class EOxDrawTools extends LitElement {
     this.eoxMap.parseTextToFeature(
       text || JSON.stringify(DUMMY_GEO_JSON),
       this.drawLayer,
+      this.eoxMap,
       replaceFeatures,
     );
   }
@@ -226,6 +258,7 @@ export class EOxDrawTools extends LitElement {
     const { EoxMap, OlMap } = initLayerMethod(this, this.multipleFeatures);
     this.eoxMap = EoxMap;
     this.#olMap = OlMap;
+    this.selectionEvents = createSelectHandler(this);
 
     if (this.importFeatures) initMapDragDropImport(this, this.eoxMap);
 
@@ -263,13 +296,14 @@ export class EOxDrawTools extends LitElement {
       <!-- Controller Component -->
       <eox-drawtools-controller
         .drawFunc=${{
-          start: () => this.handleStartDrawing(),
-          discard: () => this.handleDiscardDrawing(),
+          start: () => this.startDrawing(),
+          discard: () => this.discardDrawing(),
           editor: (/** @type {{ target: { value: string; }; }} */ evt) =>
             this.handleFeatureChange(evt.target.value, true),
           import: (/** @type {DragEvent | Event} */ evt) =>
             this.handleFilesChange(evt),
         }}
+        ?select=${!!this.layerId}
         .unstyled=${this.unstyled}
         .drawnFeatures=${this.drawnFeatures}
         .currentlyDrawing=${this.currentlyDrawing}

elements/drawtools/src/methods/draw/create-select-handler.js

@@ -0,0 +1,50 @@
+/**
+ * Factory function to create a select event handler
+ * @param {import("../../main").EOxDrawTools} EoxDrawTool - The drawing tool instance.
+ */
+const createSelectHandler = (EoxDrawTool) => {
+  /**
+   * Copy the selected feature to the draw layer
+   * and dispatches an event to add the feature to the map.
+   *
+   * @param {*} e
+   */
+  const selectHandler = (e) => {
+    if (e?.detail.id !== "SelectLayerClickInteraction" || !e.detail.feature) {
+      return;
+    }
+    EoxDrawTool.drawLayer.getSource().addFeature(e.detail.feature);
+    EoxDrawTool.eoxMap.dispatchEvent(
+      new CustomEvent("addfeatures", { detail: e.detail }),
+    );
+  };
+
+  /**
+   * Adds the selection event to the map
+   **/
+  const addSelectionEvent = () => {
+    if (EoxDrawTool.layerId) {
+      const hoverInteraction =
+        EoxDrawTool.eoxMap.selectInteractions["SelectLayerHoverInteraction"];
+      hoverInteraction.setActive(true);
+      EoxDrawTool.eoxMap.addEventListener("select", selectHandler);
+    }
+  };
+
+  /**
+   * Removes the selection event from the map and resets the selected features
+   **/
+  const removeSelectionEvent = () => {
+    const hoverInteraction =
+      EoxDrawTool.eoxMap.selectInteractions?.["SelectLayerHoverInteraction"];
+    if (hoverInteraction) {
+      hoverInteraction.selectedFids = [];
+      hoverInteraction.setActive(false);
+    }
+    EoxDrawTool.eoxMap.removeEventListener("select", selectHandler);
+  };
+
+  return { addSelectionEvent, removeSelectionEvent };
+};
+
+export default createSelectHandler;

elements/drawtools/src/methods/draw/discard-drawing.js

@@ -10,7 +10,9 @@ const discardDrawingMethod = (EoxDrawTool) => {
     // Reset drawnFeatures, deactivate drawing, and clear drawLayer's source
     EoxDrawTool.drawnFeatures = [];
     EoxDrawTool.draw.setActive(false);
+    EoxDrawTool.selectionEvents.removeSelectionEvent();
     EoxDrawTool.drawLayer.getSource().clear();
+    //@ts-expect-error TODO
     EoxDrawTool.geoJSON = null;
 
     // Clear map overlays, if available

elements/drawtools/src/methods/draw/handle-layer-id.js

@@ -0,0 +1,52 @@
+import { initSelection } from ".";
+
+/**
+ * handles switching between selection and drawing and updates of the selection layer
+ *
+ * @param {import("../../main").EOxDrawTools} EoxDrawTool
+ * @param {import("@eox/map/src/main").EOxMap} EoxMap
+ * @param {string} oldLayerId
+ * @param {string} updatedLayerId
+ * @returns
+ */
+const handleLayerId = (EoxDrawTool, EoxMap, updatedLayerId, oldLayerId) => {
+  if (!EoxMap) {
+    return;
+  }
+
+  if (updatedLayerId) {
+    if (oldLayerId && updatedLayerId !== oldLayerId) {
+      exitSelection(EoxDrawTool, EoxMap);
+      initSelection(EoxDrawTool, EoxMap, updatedLayerId);
+    } else {
+      initSelection(EoxDrawTool, EoxMap, updatedLayerId);
+    }
+    return;
+  }
+
+  if (!updatedLayerId && oldLayerId) {
+    exitSelection(EoxDrawTool, EoxMap);
+    return;
+  }
+};
+
+export default handleLayerId;
+
+/**
+ * Exits the selection mode and reverts the selection layer to its original state
+ *
+ * @param {import("../../main").EOxDrawTools} EoxDrawTool
+ * @param {import("@eox/map").EOxMap} EoxMap
+ */
+function exitSelection(EoxDrawTool, EoxMap) {
+  if (!EoxMap) {
+    return;
+  }
+  EoxDrawTool.discardDrawing();
+  EoxDrawTool.selectionEvents.removeSelectionEvent();
+  EoxDrawTool.draw = /** @type {import("ol/interaction").Draw} */ (
+    EoxMap.interactions["drawInteraction"]
+  );
+  EoxMap.selectInteractions["SelectLayerClickInteraction"].remove();
+  EoxMap.selectInteractions["SelectLayerHoverInteraction"].remove();
+}

elements/drawtools/src/methods/draw/index.js

@@ -5,3 +5,6 @@ export { default as startDrawingMethod } from "./start-drawing"; // Initializes
 export { default as initLayerMethod } from "./init-layer.js"; // Initializes layer and map interactions
 export { default as discardDrawingMethod } from "./discard-drawing"; // Handles discarding the drawing process
 export { default as emitDrawnFeaturesMethod } from "./emit-drawn-features"; // Emits drawn features
+export { default as createSelectHandler } from "./create-select-handler"; // Factory function to create select event handler
+export { default as initSelection } from "./init-selection"; // Initializes selection interactions
+export { default as handleLayerId } from "./handle-layer-id"; // handle switching between selection and drawing