@open-pioneer/editing 0.1.0 → 0.2.0

package/EditingUpdateWorkflowImpl.js

@@ -0,0 +1,257 @@
+import { EventEmitter, createManualPromise } from '@open-pioneer/core';
+import { TOPMOST_LAYER_Z } from '@open-pioneer/map';
+import { Modify } from 'ol/interaction';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import GeoJSON from 'ol/format/GeoJSON';
+import { unByKey } from 'ol/Observable';
+import { Collection, Overlay } from 'ol';
+import { createStyles } from './style-utils.js';
+import { saveUpdatedFeature } from './SaveFeaturesHandler.js';
+
+class EditingUpdateWorkflowImpl extends EventEmitter {
+  #waiter;
+  _httpService;
+  _intl;
+  _map;
+  _polygonStyle;
+  _vertexStyle;
+  _state;
+  _editLayerURL;
+  _featureId;
+  _initialFeature;
+  _editFeature;
+  _editingSource;
+  _editingLayer;
+  _modifyInteraction;
+  _olMap;
+  _mapContainer;
+  _tooltip;
+  _enterHandler;
+  _escapeHandler;
+  _error;
+  _interactionListener;
+  _mapListener;
+  constructor(options) {
+    super();
+    this._httpService = options.httpService;
+    this._intl = options.intl;
+    this._polygonStyle = options.polygonStyle;
+    this._vertexStyle = options.vertexStyle;
+    this._map = options.map;
+    this._olMap = options.map.olMap;
+    this._state = "active:initialized";
+    this._editLayerURL = options.ogcApiFeatureLayerUrl;
+    this._initialFeature = options.feature.clone();
+    this._initialFeature.setId(options.feature.getId());
+    this._editFeature = options.feature.clone();
+    this._editFeature.setId(options.feature.getId());
+    this._editFeature.setStyle(
+      createStyles({
+        polygon: this._polygonStyle,
+        vertex: this._vertexStyle
+      })
+    );
+    this._editingSource = new VectorSource({
+      features: new Collection([this._editFeature])
+    });
+    this._editingLayer = new VectorLayer({
+      source: this._editingSource,
+      zIndex: TOPMOST_LAYER_Z,
+      properties: {
+        name: "editing-layer"
+      }
+    });
+    this._modifyInteraction = new Modify({
+      source: this._editingSource
+    });
+    this._tooltip = this._createTooltip(this._olMap);
+    this._enterHandler = (e) => {
+      if ((e.code === "Enter" || e.code === "NumpadEnter") && e.target === this._olMap.getTargetElement()) {
+        const updatedFeature = this._editingSource.getFeatures()[0];
+        if (!updatedFeature) {
+          throw Error("no updated feature found");
+        }
+        this._save(updatedFeature);
+      }
+    };
+    this._escapeHandler = (e) => {
+      if (e.code === "Escape" && e.target === this._olMap.getTargetElement()) {
+        this.reset();
+      }
+    };
+    this._interactionListener = [];
+    this._mapListener = [];
+    this._start();
+  }
+  getModifyInteraction() {
+    return this._modifyInteraction;
+  }
+  getState() {
+    return this._state;
+  }
+  _setState(state) {
+    this._state = state;
+    this.emit(state);
+  }
+  _save(feature) {
+    this._setState("active:saving");
+    const layerUrl = this._editLayerURL;
+    this._featureId = feature.getId()?.toString();
+    if (!this._featureId) {
+      this._destroy();
+      this._error = new Error("no feature id available");
+      this.#waiter?.reject(this._error);
+      return;
+    }
+    const geometry = feature?.getGeometry();
+    if (!geometry) {
+      this._destroy();
+      this._error = new Error("no geometry available");
+      this.#waiter?.reject(this._error);
+      return;
+    }
+    const projection = this._olMap.getView().getProjection();
+    const geoJson = new GeoJSON({
+      dataProjection: projection
+    });
+    const geoJSONGeometry = geoJson.writeGeometryObject(geometry, {
+      rightHanded: true,
+      decimals: 10
+    });
+    saveUpdatedFeature(
+      this._httpService,
+      layerUrl,
+      this._featureId,
+      geoJSONGeometry,
+      projection
+    ).then((featureId) => {
+      this._destroy();
+      this.#waiter?.resolve({ featureId });
+    }).catch((err) => {
+      this._destroy();
+      this._error = new Error("Failed to save feature", { cause: err });
+      this.#waiter?.reject(this._error);
+    });
+  }
+  _start() {
+    this._olMap.addLayer(this._editingLayer);
+    this._olMap.addInteraction(this._modifyInteraction);
+    const feature = this._editingSource.getFeatures()[0];
+    if (feature && !feature.getId()?.toString()) {
+      this._destroy();
+      this._error = new Error("no feature id available");
+      this.#waiter?.reject(this._error);
+      return;
+    }
+    this._mapContainer = this._olMap.getTargetElement() ?? void 0;
+    if (this._mapContainer) {
+      this._mapContainer.addEventListener("keydown", this._enterHandler, false);
+      this._mapContainer.addEventListener("keydown", this._escapeHandler, false);
+    }
+    this._tooltip.element.classList.remove("editing-tooltip-hidden");
+    const click = this._map.olMap.on("click", (e) => {
+      const coordinate = e.coordinate;
+      const altKeyPressed = e.originalEvent.altKey;
+      const features = this._editingSource.getFeaturesAtCoordinate(coordinate);
+      if (altKeyPressed) {
+        return;
+      }
+      if (features.length === 0) {
+        this.triggerSave();
+      }
+    });
+    const modify = this._modifyInteraction.on("modifystart", () => {
+      this._setState("active:drawing");
+    });
+    const changedContainer = this._map.on("changed:container", () => {
+      this._mapContainer?.removeEventListener("keydown", this._enterHandler);
+      this._mapContainer?.removeEventListener("keydown", this._escapeHandler);
+      this._mapContainer = this._olMap.getTargetElement() ?? void 0;
+      if (this._mapContainer) {
+        this._mapContainer.addEventListener("keydown", this._enterHandler, false);
+        this._mapContainer.addEventListener("keydown", this._escapeHandler, false);
+      }
+    });
+    this._interactionListener.push(click, modify);
+    this._mapListener.push(changedContainer);
+  }
+  reset() {
+    const geometry = this._initialFeature.getGeometry()?.clone();
+    const resetFeature = this._editingSource.getFeatures()[0];
+    if (!resetFeature) {
+      throw Error("no updated feature found");
+    }
+    resetFeature.setGeometry(geometry);
+    this._setState("active:initialized");
+  }
+  stop() {
+    this._destroy();
+    this.#waiter?.resolve(void 0);
+  }
+  _destroy() {
+    this._editingSource.clear();
+    this._olMap.removeLayer(this._editingLayer);
+    this._olMap.removeInteraction(this._modifyInteraction);
+    this._tooltip.destroy();
+    this._interactionListener.map((listener) => {
+      unByKey(listener);
+    });
+    this._mapListener.map((listener) => {
+      listener.destroy();
+    });
+    this._mapContainer?.removeEventListener("keydown", this._enterHandler);
+    this._mapContainer?.removeEventListener("keydown", this._escapeHandler);
+    this._setState("destroyed");
+  }
+  triggerSave() {
+    const feature = this._editingSource.getFeatures()[0];
+    if (!feature) {
+      throw Error("no updated feature found");
+    }
+    this._save(feature);
+  }
+  whenComplete() {
+    if (this._state === "destroyed") {
+      if (this._error) {
+        return Promise.reject(this._error);
+      } else {
+        if (this._featureId) {
+          return Promise.resolve({ featureId: this._featureId });
+        } else {
+          return Promise.resolve(void 0);
+        }
+      }
+    }
+    const manualPromise = this.#waiter ??= createManualPromise();
+    return manualPromise.promise;
+  }
+  _createTooltip(olMap) {
+    const element = document.createElement("div");
+    element.className = "editing-tooltip editing-tooltip-hidden";
+    element.textContent = this._intl.formatMessage({ id: "create.tooltip.deselect" });
+    const overlay = new Overlay({
+      element,
+      offset: [15, 0],
+      positioning: "center-left"
+    });
+    const pointerMove = olMap.on("pointermove", (evt) => {
+      if (evt.dragging) {
+        return;
+      }
+      overlay.setPosition(evt.coordinate);
+    });
+    olMap.addOverlay(overlay);
+    return {
+      overlay,
+      element,
+      destroy() {
+        unByKey(pointerMove);
+        olMap.removeOverlay(overlay);
+      }
+    };
+  }
+}
+
+export { EditingUpdateWorkflowImpl };
+//# sourceMappingURL=EditingUpdateWorkflowImpl.js.map

package/EditingUpdateWorkflowImpl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditingUpdateWorkflowImpl.js","sources":["EditingUpdateWorkflowImpl.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { EventEmitter, ManualPromise, createManualPromise } from \"@open-pioneer/core\";\nimport { MapModel, TOPMOST_LAYER_Z } from \"@open-pioneer/map\";\nimport { Modify } from \"ol/interaction\";\nimport VectorLayer from \"ol/layer/Vector\";\nimport VectorSource from \"ol/source/Vector\";\nimport { HttpService } from \"@open-pioneer/http\";\nimport { FlatStyle } from \"ol/style/flat\";\nimport Feature from \"ol/Feature\";\nimport GeoJSON from \"ol/format/GeoJSON\";\nimport GeoJSONGeometry from \"ol/format/GeoJSON\";\nimport GeoJSONGeometryCollection from \"ol/format/GeoJSON\";\nimport OlMap from \"ol/Map\";\nimport { Resource } from \"@open-pioneer/core\";\nimport { unByKey } from \"ol/Observable\";\nimport { EventsKey } from \"ol/events\";\nimport {\n    EditingWorkflowEvents,\n    EditingWorkflowState,\n    EditingWorkflow,\n    EditingWorkflowProps\n} from \"./api\";\nimport { Collection, Overlay } from \"ol\";\nimport { createStyles } from \"./style-utils\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport { saveUpdatedFeature } from \"./SaveFeaturesHandler\";\n\n// Represents a tooltip rendered on the OpenLayers map\ninterface Tooltip extends Resource {\n    overlay: Overlay;\n    element: HTMLDivElement;\n}\n\nexport class EditingUpdateWorkflowImpl\n    extends EventEmitter<EditingWorkflowEvents>\n    implements EditingWorkflow\n{\n    #waiter: ManualPromise<Record<string, string> | undefined> | undefined;\n\n    private _httpService: HttpService;\n    private _intl: PackageIntl;\n\n    private _map: MapModel;\n    private _polygonStyle: FlatStyle;\n    private _vertexStyle: FlatStyle;\n    private _state: EditingWorkflowState;\n    private _editLayerURL: URL;\n    private _featureId: string | undefined;\n\n    private _initialFeature: Feature;\n    private _editFeature: Feature;\n    private _editingSource: VectorSource;\n    private _editingLayer: VectorLayer<VectorSource>;\n    private _modifyInteraction: Modify;\n    private _olMap: OlMap;\n    private _mapContainer: HTMLElement | undefined;\n    private _tooltip: Tooltip;\n    private _enterHandler: (e: KeyboardEvent) => void;\n    private _escapeHandler: (e: KeyboardEvent) => void;\n\n    private _error: Error | undefined;\n\n    private _interactionListener: Array<EventsKey>;\n    private _mapListener: Array<Resource>;\n\n    constructor(options: { feature: Feature } & EditingWorkflowProps) {\n        super();\n        this._httpService = options.httpService;\n        this._intl = options.intl;\n\n        this._polygonStyle = options.polygonStyle;\n        this._vertexStyle = options.vertexStyle;\n\n        this._map = options.map;\n        this._olMap = options.map.olMap;\n        this._state = \"active:initialized\";\n        this._editLayerURL = options.ogcApiFeatureLayerUrl;\n\n        // Save copy of initial state for reset feature\n        this._initialFeature = options.feature.clone();\n        this._initialFeature.setId(options.feature.getId());\n\n        // Work on copied feature to avoid the style to be applied on the original feature\n        this._editFeature = options.feature.clone();\n        this._editFeature.setId(options.feature.getId());\n\n        this._editFeature.setStyle(\n            createStyles({\n                polygon: this._polygonStyle,\n                vertex: this._vertexStyle\n            })\n        );\n\n        this._editingSource = new VectorSource({\n            features: new Collection([this._editFeature])\n        });\n        this._editingLayer = new VectorLayer({\n            source: this._editingSource,\n            zIndex: TOPMOST_LAYER_Z,\n            properties: {\n                name: \"editing-layer\"\n            }\n        });\n\n        this._modifyInteraction = new Modify({\n            source: this._editingSource\n        });\n\n        this._tooltip = this._createTooltip(this._olMap);\n\n        this._enterHandler = (e: KeyboardEvent) => {\n            if (\n                (e.code === \"Enter\" || e.code === \"NumpadEnter\") &&\n                e.target === this._olMap.getTargetElement()\n            ) {\n                const updatedFeature = this._editingSource.getFeatures()[0];\n                if (!updatedFeature) {\n                    throw Error(\"no updated feature found\");\n                }\n                this._save(updatedFeature);\n            }\n        };\n\n        this._escapeHandler = (e: KeyboardEvent) => {\n            if (e.code === \"Escape\" && e.target === this._olMap.getTargetElement()) {\n                this.reset();\n            }\n        };\n\n        this._interactionListener = [];\n        this._mapListener = [];\n\n        this._start();\n    }\n\n    getModifyInteraction() {\n        return this._modifyInteraction;\n    }\n\n    getState() {\n        return this._state;\n    }\n\n    private _setState(state: EditingWorkflowState) {\n        this._state = state;\n        this.emit(state);\n    }\n\n    private _save(feature: Feature) {\n        this._setState(\"active:saving\");\n\n        const layerUrl = this._editLayerURL;\n\n        this._featureId = feature.getId()?.toString();\n        if (!this._featureId) {\n            this._destroy();\n            this._error = new Error(\"no feature id available\");\n            this.#waiter?.reject(this._error);\n            return;\n        }\n\n        const geometry = feature?.getGeometry();\n        if (!geometry) {\n            this._destroy();\n            this._error = new Error(\"no geometry available\");\n            this.#waiter?.reject(this._error);\n            return;\n        }\n        const projection = this._olMap.getView().getProjection();\n        const geoJson = new GeoJSON({\n            dataProjection: projection\n        });\n        const geoJSONGeometry: GeoJSONGeometry | GeoJSONGeometryCollection =\n            geoJson.writeGeometryObject(geometry, {\n                rightHanded: true,\n                decimals: 10\n            });\n\n        saveUpdatedFeature(\n            this._httpService,\n            layerUrl,\n            this._featureId,\n            geoJSONGeometry,\n            projection\n        )\n            .then((featureId) => {\n                this._destroy();\n                this.#waiter?.resolve({ featureId });\n            })\n            .catch((err: Error) => {\n                this._destroy();\n                this._error = new Error(\"Failed to save feature\", { cause: err });\n                this.#waiter?.reject(this._error);\n            });\n    }\n\n    private _start() {\n        this._olMap.addLayer(this._editingLayer);\n        this._olMap.addInteraction(this._modifyInteraction);\n\n        const feature = this._editingSource.getFeatures()[0];\n        if (feature && !feature.getId()?.toString()) {\n            this._destroy();\n            this._error = new Error(\"no feature id available\");\n            this.#waiter?.reject(this._error);\n            return;\n        }\n\n        // Add EventListener on focused map to abort actual interaction via `Escape`\n        this._mapContainer = this._olMap.getTargetElement() ?? undefined;\n        if (this._mapContainer) {\n            this._mapContainer.addEventListener(\"keydown\", this._enterHandler, false);\n            this._mapContainer.addEventListener(\"keydown\", this._escapeHandler, false);\n        }\n\n        this._tooltip.element.classList.remove(\"editing-tooltip-hidden\");\n\n        const click = this._map.olMap.on(\"click\", (e) => {\n            const coordinate = e.coordinate;\n            const altKeyPressed = e.originalEvent.altKey;\n            const features = this._editingSource.getFeaturesAtCoordinate(coordinate);\n\n            if (altKeyPressed) {\n                return;\n            }\n\n            if (features.length === 0) {\n                this.triggerSave();\n            }\n        });\n\n        const modify = this._modifyInteraction.on(\"modifystart\", () => {\n            this._setState(\"active:drawing\");\n        });\n\n        // update event handler when container changes\n        const changedContainer = this._map.on(\"changed:container\", () => {\n            this._mapContainer?.removeEventListener(\"keydown\", this._enterHandler);\n            this._mapContainer?.removeEventListener(\"keydown\", this._escapeHandler);\n\n            this._mapContainer = this._olMap.getTargetElement() ?? undefined;\n            if (this._mapContainer) {\n                this._mapContainer.addEventListener(\"keydown\", this._enterHandler, false);\n                this._mapContainer.addEventListener(\"keydown\", this._escapeHandler, false);\n            }\n        });\n\n        this._interactionListener.push(click, modify);\n        this._mapListener.push(changedContainer);\n    }\n\n    reset() {\n        // Clone geometry to pass geometry, not reference\n        const geometry = this._initialFeature.getGeometry()?.clone();\n\n        const resetFeature = this._editingSource.getFeatures()[0];\n        if (!resetFeature) {\n            throw Error(\"no updated feature found\");\n        }\n        resetFeature.setGeometry(geometry);\n\n        this._setState(\"active:initialized\");\n    }\n\n    stop() {\n        this._destroy();\n        this.#waiter?.resolve(undefined);\n    }\n\n    private _destroy() {\n        this._editingSource.clear();\n        this._olMap.removeLayer(this._editingLayer);\n        this._olMap.removeInteraction(this._modifyInteraction);\n        this._tooltip.destroy();\n\n        // Remove event listener on interaction and on map\n        this._interactionListener.map((listener) => {\n            unByKey(listener);\n        });\n        this._mapListener.map((listener) => {\n            listener.destroy();\n        });\n\n        // Remove event escape listener\n        this._mapContainer?.removeEventListener(\"keydown\", this._enterHandler);\n        this._mapContainer?.removeEventListener(\"keydown\", this._escapeHandler);\n\n        this._setState(\"destroyed\");\n    }\n\n    triggerSave() {\n        const feature = this._editingSource.getFeatures()[0];\n        if (!feature) {\n            throw Error(\"no updated feature found\");\n        }\n        this._save(feature);\n    }\n\n    whenComplete(): Promise<Record<string, string> | undefined> {\n        if (this._state === \"destroyed\") {\n            if (this._error) {\n                return Promise.reject(this._error);\n            } else {\n                if (this._featureId) {\n                    return Promise.resolve({ featureId: this._featureId });\n                } else {\n                    return Promise.resolve(undefined);\n                }\n            }\n        }\n\n        const manualPromise = (this.#waiter ??= createManualPromise());\n        return manualPromise.promise;\n    }\n\n    private _createTooltip(olMap: OlMap): Tooltip {\n        const element = document.createElement(\"div\");\n        element.className = \"editing-tooltip editing-tooltip-hidden\";\n        element.textContent = this._intl.formatMessage({ id: \"create.tooltip.deselect\" });\n\n        const overlay = new Overlay({\n            element: element,\n            offset: [15, 0],\n            positioning: \"center-left\"\n        });\n\n        const pointerMove = olMap.on(\"pointermove\", (evt) => {\n            if (evt.dragging) {\n                return;\n            }\n\n            overlay.setPosition(evt.coordinate);\n        });\n\n        olMap.addOverlay(overlay);\n\n        return {\n            overlay,\n            element,\n            destroy() {\n                unByKey(pointerMove);\n                olMap.removeOverlay(overlay);\n            }\n        };\n    }\n}\n"],"names":[],"mappings":"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"}

package/README.md

@@ -2,11 +2,22 @@
 
 This package provides an editing service that allows to start and handle geometry editing workflows.
 
-Note: The editing only works with OGC API Feature Services. The editing was only tested using the implementation of the OGC API Features in the XtraServer by interactive instruments. The collection where the geometry will be saved, needs to support the map's coordinate system.
+> **_NOTE:_** The editing only works with OGC API Feature Services. The editing was only tested using
+> the implementation of the OGC API Features in the XtraServer by interactive instruments.
+> The collection in that the geometry will be saved, needs to support the map's coordinate system.
+> The saving process may not be suitable for all kinds of OGC API Feature Service set up using the XtraServer.
+> Please note the following additional information to ensure that process is appropriate for your services.
+>
+> Additional information:
+>
+> -   Create Workflow: The feature is saved in the collection as a new feature with an empty properties
+>     object and without an id (using POST).
+> -   Update Workflow: The updated geometry is saved for the feature in the collection using a PATCH request.
+>     In addition to the new geometry, the PATCH request sends an empty properties object within the body.
 
 ## Usage
 
-To use the editing in an app, inject the editing service. Use the `start` method to create a new editing workflow.
+To use the editing in an app, inject the editing service. Use the `createFeature` method to create a new `create` editing workflow or `updateFeature` method to create a new `update` editing workflow.
 
 Example:
 
@@ -24,10 +35,13 @@ export default defineBuildConfig({
 ```tsx
 const editingService = useService<EditingService>("editing.EditingService");
 const editingCollectionUrl = new URL("...");
-const workflow = editingService.start(map, editingCollectionUrl);
+const feature = new Feature({});
+
+const createWorkflow = editingService.createFeature(map, editingCollectionUrl);
+const updateWorkflow = editingService.updateFeature(map, editingCollectionUrl, feature);
 ```
 
-An editing workflow can be stopped completely or the current drawing can be deleted without leaving the edit mode.
+An editing workflow can be stopped completely or the current drawing can be reset to the initial state without leaving the edit mode.
 
 Example:
 
@@ -63,7 +77,7 @@ Example:
 ```js
 workflow
     .whenComplete()
-    .then((featureId: string | undefined) => {
+    .then((featureId: Record<string, string> | undefined) => {
         // ...
     })
     .catch((error: Error) => {
@@ -85,7 +99,9 @@ vectorLayer.getSource()?.refresh();
 
 The default style of the geometries can be overridden with a custom style.
 
-Each geometry type has its own styling property (currently only `polygonDrawStyle`). See OpenLayers [`FlatStyleLike`](https://openlayers.org/en/latest/apidoc/module-ol_style_flat.html) for valid styling options.
+Each geometry type has its own styling property (currently `polygonStyle` and `vertexStyle`). See OpenLayers [`FlatStyle`](https://openlayers.org/en/latest/apidoc/module-ol_style_flat.html#~FlatStyle) for valid styling options.
+
+Example:
 
 ```js
 const element = createCustomElement({
@@ -93,14 +109,20 @@ const element = createCustomElement({
     config: {
         properties: {
             "@open-pioneer/editing": {
-                "polygonDrawStyle": {
+                "polygonStyle": {
+                    "fill-color": "rgba(255,255,255,0.4)",
                     "stroke-color": "red",
                     "stroke-width": 2,
-                    "fill-color": "rgba(0, 0, 0, 0.1)",
                     "circle-radius": 5,
-                    "circle-fill-color": "rgba(255, 0, 0, 0.2)",
-                    "circle-stroke-color": "rgba(255, 0, 0, 0.7)",
-                    "circle-stroke-width": 2
+                    "circle-fill-color": "red",
+                    "circle-stroke-width": 1.25,
+                    "circle-stroke-color": "red"
+                },
+                "vertexStyle": {
+                    "circle-radius": 5,
+                    "circle-fill-color": "red",
+                    "circle-stroke-width": 1.25,
+                    "circle-stroke-color": "red"
                 }
             }
         }
@@ -111,6 +133,49 @@ const element = createCustomElement({
 customElements.define("ol-map-app", element);
 ```
 
+Set `vertexStyle` to `null`, if no style is needed.
+
+Example:
+
+```js
+const element = createCustomElement({
+    ...,
+    config: {
+        properties: {
+            "@open-pioneer/editing": {
+                "polygonStyle": {
+                    "fill-color": "rgba(255,255,255,0.4)",
+                    "stroke-color": "red",
+                    "stroke-width": 2,
+                    "circle-radius": 5,
+                    "circle-fill-color": "red",
+                    "circle-stroke-width": 1.25,
+                    "circle-stroke-color": "red"
+                },
+                "vertexStyle": null
+            }
+        }
+    },
+    ...
+});
+
+customElements.define("ol-map-app", element);
+```
+
+### Keyboard shortcuts and operating instructions
+
+The user can use the following keyboard shortcuts / interactions during create feature workflow:
+
+-   `Esc`: Reset the drawing
+-   `Mouse double-click`: Set last vertex and finish drawing
+-   `Enter`: Finish drawing (vertex that is currently drawn is discarded)
+
+The user can use the following keyboard shortcuts / interactions during update feature workflow:
+
+-   `Esc`: Reset the drawing
+-   `Alt + MouseClick`: Remove vertices from feature
+-   `Mouse click (outside feature)` or `Enter`: finish editing
+
 ## License
 
 Apache-2.0 (see `LICENSE` file)

package/SaveFeaturesHandler.d.ts

@@ -2,4 +2,13 @@ import { HttpService } from "@open-pioneer/http";
 import GeoJSONGeometry from "ol/format/GeoJSON";
 import GeoJSONGeometryCollection from "ol/format/GeoJSON";
 import { Projection } from "ol/proj";
+/**
+ * Function to save a created feature to an OGC API Features service.
+ * Resolves with feature id, or rejects if an error occurs.
+ */
 export declare function saveCreatedFeature(httpService: HttpService, url: URL, geometry: GeoJSONGeometry | GeoJSONGeometryCollection, projection: Projection): Promise<string>;
+/**
+ * Function to save an updated geometry to a feature to an OGC API Features service.
+ * Resolves with feature id, or rejects if an error occurs.
+ */
+export declare function saveUpdatedFeature(httpService: HttpService, url: URL, featureId: string, geometry: GeoJSONGeometry | GeoJSONGeometryCollection, projection: Projection): Promise<string>;

package/SaveFeaturesHandler.js

@@ -19,6 +19,23 @@ async function saveCreatedFeature(httpService, url, geometry, projection) {
   const featureId = location.substring(location.lastIndexOf("/") + 1);
   return Promise.resolve(featureId);
 }
+async function saveUpdatedFeature(httpService, url, featureId, geometry, projection) {
+  const epsgCode = projection.getCode();
+  const crs = epsgCode.replace("EPSG:", "http://www.opengis.net/def/crs/EPSG/0/");
+  const featureUrl = new URL(`${url.toString()}/${featureId}`);
+  const response = await httpService.fetch(featureUrl, {
+    method: "PATCH",
+    body: JSON.stringify({ type: "Feature", properties: {}, geometry }),
+    headers: {
+      "Content-Type": "application/geo+json; charset=utf-8",
+      "Content-Crs": `<${crs}>`
+    }
+  });
+  if (!response || !response.ok || response.status !== 204) {
+    return Promise.reject(new Error("Request failed: " + response.status));
+  }
+  return Promise.resolve(featureId);
+}
 
-export { saveCreatedFeature };
+export { saveCreatedFeature, saveUpdatedFeature };
 //# sourceMappingURL=SaveFeaturesHandler.js.map

package/SaveFeaturesHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"SaveFeaturesHandler.js","sources":["SaveFeaturesHandler.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\n\nimport { HttpService } from \"@open-pioneer/http\";\nimport GeoJSONGeometry from \"ol/format/GeoJSON\";\nimport GeoJSONGeometryCollection from \"ol/format/GeoJSON\";\nimport { Projection } from \"ol/proj\";\n\nexport async function saveCreatedFeature(\n    httpService: HttpService,\n    url: URL,\n    geometry: GeoJSONGeometry | GeoJSONGeometryCollection,\n    projection: Projection\n) {\n    const epsgCode = projection.getCode();\n    const crs = epsgCode.replace(\"EPSG:\", \"http://www.opengis.net/def/crs/EPSG/0/\");\n    const response = await httpService.fetch(url, {\n        method: \"POST\",\n        body: JSON.stringify({ type: \"Feature\", properties: {}, geometry: geometry }),\n        headers: {\n            \"Content-Type\": \"application/geo+json; charset=utf-8\",\n            \"Content-Crs\": `<${crs}>`\n        }\n    });\n\n    if (!response || !response.ok || response.status !== 201) {\n        return Promise.reject(new Error(\"Request failed: \" + response.status));\n    }\n\n    const location = response.headers.get(\"location\");\n    if (!location) {\n        return Promise.reject(new Error(\"Request failed: no Location response header\"));\n    }\n\n    const featureId = location.substring(location.lastIndexOf(\"/\") + 1);\n\n    return Promise.resolve(featureId);\n}\n"],"names":[],"mappings":"AAQA,eAAsB,kBAClB,CAAA,WAAA,EACA,GACA,EAAA,QAAA,EACA,UACF,EAAA;AACE,EAAM,MAAA,QAAA,GAAW,WAAW,OAAQ,EAAA,CAAA;AACpC,EAAA,MAAM,GAAM,GAAA,QAAA,CAAS,OAAQ,CAAA,OAAA,EAAS,wCAAwC,CAAA,CAAA;AAC9E,EAAA,MAAM,QAAW,GAAA,MAAM,WAAY,CAAA,KAAA,CAAM,GAAK,EAAA;AAAA,IAC1C,MAAQ,EAAA,MAAA;AAAA,IACR,IAAA,EAAM,IAAK,CAAA,SAAA,CAAU,EAAE,IAAA,EAAM,WAAW,UAAY,EAAA,EAAI,EAAA,QAAA,EAAoB,CAAA;AAAA,IAC5E,OAAS,EAAA;AAAA,MACL,cAAgB,EAAA,qCAAA;AAAA,MAChB,aAAA,EAAe,IAAI,GAAG,CAAA,CAAA,CAAA;AAAA,KAC1B;AAAA,GACH,CAAA,CAAA;AAED,EAAA,IAAI,CAAC,QAAY,IAAA,CAAC,SAAS,EAAM,IAAA,QAAA,CAAS,WAAW,GAAK,EAAA;AACtD,IAAA,OAAO,QAAQ,MAAO,CAAA,IAAI,MAAM,kBAAqB,GAAA,QAAA,CAAS,MAAM,CAAC,CAAA,CAAA;AAAA,GACzE;AAEA,EAAA,MAAM,QAAW,GAAA,QAAA,CAAS,OAAQ,CAAA,GAAA,CAAI,UAAU,CAAA,CAAA;AAChD,EAAA,IAAI,CAAC,QAAU,EAAA;AACX,IAAA,OAAO,OAAQ,CAAA,MAAA,CAAO,IAAI,KAAA,CAAM,6CAA6C,CAAC,CAAA,CAAA;AAAA,GAClF;AAEA,EAAA,MAAM,YAAY,QAAS,CAAA,SAAA,CAAU,SAAS,WAAY,CAAA,GAAG,IAAI,CAAC,CAAA,CAAA;AAElE,EAAO,OAAA,OAAA,CAAQ,QAAQ,SAAS,CAAA,CAAA;AACpC;;;;"}
+{"version":3,"file":"SaveFeaturesHandler.js","sources":["SaveFeaturesHandler.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { HttpService } from \"@open-pioneer/http\";\nimport GeoJSONGeometry from \"ol/format/GeoJSON\";\nimport GeoJSONGeometryCollection from \"ol/format/GeoJSON\";\nimport { Projection } from \"ol/proj\";\n\n/**\n * Function to save a created feature to an OGC API Features service.\n * Resolves with feature id, or rejects if an error occurs.\n */\nexport async function saveCreatedFeature(\n    httpService: HttpService,\n    url: URL,\n    geometry: GeoJSONGeometry | GeoJSONGeometryCollection,\n    projection: Projection\n) {\n    const epsgCode = projection.getCode();\n    const crs = epsgCode.replace(\"EPSG:\", \"http://www.opengis.net/def/crs/EPSG/0/\");\n    const response = await httpService.fetch(url, {\n        method: \"POST\",\n        body: JSON.stringify({ type: \"Feature\", properties: {}, geometry: geometry }),\n        headers: {\n            \"Content-Type\": \"application/geo+json; charset=utf-8\",\n            \"Content-Crs\": `<${crs}>`\n        }\n    });\n\n    if (!response || !response.ok || response.status !== 201) {\n        return Promise.reject(new Error(\"Request failed: \" + response.status));\n    }\n\n    const location = response.headers.get(\"location\");\n    if (!location) {\n        return Promise.reject(new Error(\"Request failed: no Location response header\"));\n    }\n\n    const featureId = location.substring(location.lastIndexOf(\"/\") + 1);\n\n    return Promise.resolve(featureId);\n}\n\n/**\n * Function to save an updated geometry to a feature to an OGC API Features service.\n * Resolves with feature id, or rejects if an error occurs.\n */\nexport async function saveUpdatedFeature(\n    httpService: HttpService,\n    url: URL,\n    featureId: string,\n    geometry: GeoJSONGeometry | GeoJSONGeometryCollection,\n    projection: Projection\n) {\n    const epsgCode = projection.getCode();\n    const crs = epsgCode.replace(\"EPSG:\", \"http://www.opengis.net/def/crs/EPSG/0/\");\n    const featureUrl = new URL(`${url.toString()}/${featureId}`);\n    const response = await httpService.fetch(featureUrl, {\n        method: \"PATCH\",\n        body: JSON.stringify({ type: \"Feature\", properties: {}, geometry: geometry }),\n        headers: {\n            \"Content-Type\": \"application/geo+json; charset=utf-8\",\n            \"Content-Crs\": `<${crs}>`\n        }\n    });\n\n    if (!response || !response.ok || response.status !== 204) {\n        return Promise.reject(new Error(\"Request failed: \" + response.status));\n    }\n\n    return Promise.resolve(featureId);\n}\n"],"names":[],"mappings":"AAWA,eAAsB,kBAClB,CAAA,WAAA,EACA,GACA,EAAA,QAAA,EACA,UACF,EAAA;AACE,EAAM,MAAA,QAAA,GAAW,WAAW,OAAQ,EAAA,CAAA;AACpC,EAAA,MAAM,GAAM,GAAA,QAAA,CAAS,OAAQ,CAAA,OAAA,EAAS,wCAAwC,CAAA,CAAA;AAC9E,EAAA,MAAM,QAAW,GAAA,MAAM,WAAY,CAAA,KAAA,CAAM,GAAK,EAAA;AAAA,IAC1C,MAAQ,EAAA,MAAA;AAAA,IACR,IAAA,EAAM,IAAK,CAAA,SAAA,CAAU,EAAE,IAAA,EAAM,WAAW,UAAY,EAAA,EAAI,EAAA,QAAA,EAAoB,CAAA;AAAA,IAC5E,OAAS,EAAA;AAAA,MACL,cAAgB,EAAA,qCAAA;AAAA,MAChB,aAAA,EAAe,IAAI,GAAG,CAAA,CAAA,CAAA;AAAA,KAC1B;AAAA,GACH,CAAA,CAAA;AAED,EAAA,IAAI,CAAC,QAAY,IAAA,CAAC,SAAS,EAAM,IAAA,QAAA,CAAS,WAAW,GAAK,EAAA;AACtD,IAAA,OAAO,QAAQ,MAAO,CAAA,IAAI,MAAM,kBAAqB,GAAA,QAAA,CAAS,MAAM,CAAC,CAAA,CAAA;AAAA,GACzE;AAEA,EAAA,MAAM,QAAW,GAAA,QAAA,CAAS,OAAQ,CAAA,GAAA,CAAI,UAAU,CAAA,CAAA;AAChD,EAAA,IAAI,CAAC,QAAU,EAAA;AACX,IAAA,OAAO,OAAQ,CAAA,MAAA,CAAO,IAAI,KAAA,CAAM,6CAA6C,CAAC,CAAA,CAAA;AAAA,GAClF;AAEA,EAAA,MAAM,YAAY,QAAS,CAAA,SAAA,CAAU,SAAS,WAAY,CAAA,GAAG,IAAI,CAAC,CAAA,CAAA;AAElE,EAAO,OAAA,OAAA,CAAQ,QAAQ,SAAS,CAAA,CAAA;AACpC,CAAA;AAMA,eAAsB,kBAClB,CAAA,WAAA,EACA,GACA,EAAA,SAAA,EACA,UACA,UACF,EAAA;AACE,EAAM,MAAA,QAAA,GAAW,WAAW,OAAQ,EAAA,CAAA;AACpC,EAAA,MAAM,GAAM,GAAA,QAAA,CAAS,OAAQ,CAAA,OAAA,EAAS,wCAAwC,CAAA,CAAA;AAC9E,EAAM,MAAA,UAAA,GAAa,IAAI,GAAI,CAAA,CAAA,EAAG,IAAI,QAAS,EAAC,CAAI,CAAA,EAAA,SAAS,CAAE,CAAA,CAAA,CAAA;AAC3D,EAAA,MAAM,QAAW,GAAA,MAAM,WAAY,CAAA,KAAA,CAAM,UAAY,EAAA;AAAA,IACjD,MAAQ,EAAA,OAAA;AAAA,IACR,IAAA,EAAM,IAAK,CAAA,SAAA,CAAU,EAAE,IAAA,EAAM,WAAW,UAAY,EAAA,EAAI,EAAA,QAAA,EAAoB,CAAA;AAAA,IAC5E,OAAS,EAAA;AAAA,MACL,cAAgB,EAAA,qCAAA;AAAA,MAChB,aAAA,EAAe,IAAI,GAAG,CAAA,CAAA,CAAA;AAAA,KAC1B;AAAA,GACH,CAAA,CAAA;AAED,EAAA,IAAI,CAAC,QAAY,IAAA,CAAC,SAAS,EAAM,IAAA,QAAA,CAAS,WAAW,GAAK,EAAA;AACtD,IAAA,OAAO,QAAQ,MAAO,CAAA,IAAI,MAAM,kBAAqB,GAAA,QAAA,CAAS,MAAM,CAAC,CAAA,CAAA;AAAA,GACzE;AAEA,EAAO,OAAA,OAAA,CAAQ,QAAQ,SAAS,CAAA,CAAA;AACpC;;;;"}

package/api.d.ts

@@ -1,18 +1,24 @@
 import { EventEmitter } from "@open-pioneer/core";
+import { HttpService } from "@open-pioneer/http";
 import { MapModel } from "@open-pioneer/map";
-import type { DeclaredService } from "@open-pioneer/runtime";
+import type { DeclaredService, PackageIntl } from "@open-pioneer/runtime";
+import { Feature } from "ol";
+import { FlatStyle } from "ol/style/flat";
 /**
  * State of an editing workflow
  */
-export type EditingWorkflowState = "active:initialized" | "active:drawing" | "active:saving" | "inactive";
-/** Events emitted by the {@link EditingWorkflow}. */
+export type EditingWorkflowState = "active:initialized" | "active:drawing" | "active:saving" | "destroyed";
+/**
+ * Events emitted by the {@link EditingWorkflow}.
+ */
 export interface EditingWorkflowEvents {
     /**
      * Initial state after editing workflow was started but user has not yet started drawing.
      */
     "active:initialized": void;
     /**
-     * State while user is drawing a feature. State is entered when user adds the first vertex of the geometry.
+     * State while user is drawing a feature. State is entered when user adds the first vertex of the geometry (`create-mode`).
+     * State while user is updating an existing feature. State is entered when user moved the first vertex of the geometry (`update-mode`).
      */
     "active:drawing": void;
     /**
@@ -22,7 +28,18 @@ export interface EditingWorkflowEvents {
     /**
      * State after editing is stopped.
      */
-    "inactive": void;
+    "destroyed": void;
+}
+/**
+ * Props of an editing workflow
+ */
+export interface EditingWorkflowProps {
+    map: MapModel;
+    ogcApiFeatureLayerUrl: URL;
+    polygonStyle: FlatStyle;
+    vertexStyle: FlatStyle;
+    httpService: HttpService;
+    intl: PackageIntl;
 }
 /**
  * EditingWorkflows are created by the {@link EditingService}
@@ -33,12 +50,16 @@ export interface EditingWorkflow extends EventEmitter<EditingWorkflowEvents> {
      * Returns the current state of the editing workflow.
      */
     getState(): EditingWorkflowState;
+    /**
+     * Trigger saving the currently drawn/updated feature.
+     */
+    triggerSave(): void;
     /**
      * Wait for the editing to be finished. The returned promise resolves with the
      * feature ID when saving was successful and rejects if saving the feature
      * failed. It resolves with undefined when the editing was stopped.
      */
-    whenComplete(): Promise<string | undefined>;
+    whenComplete(): Promise<Record<string, string> | undefined>;
 }
 /**
  * The editing service allows to start and handle editing workflows.
@@ -47,15 +68,19 @@ export interface EditingWorkflow extends EventEmitter<EditingWorkflowEvents> {
  */
 export interface EditingService extends DeclaredService<"editing.EditingService"> {
     /**
-     * Creates and initializes a new {@link EditingWorkflow}.
+     * Creates and initializes a new {@link EditingWorkflow} to create a geometry.
+     */
+    createFeature(map: MapModel, ogcApiFeatureLayerUrl: URL): EditingWorkflow;
+    /**
+     * Creates and initializes a new {@link EditingWorkflow} to update an existing feature's geometry.
      */
-    start(map: MapModel, ogcApiFeatureLayerUrl: URL): EditingWorkflow;
+    updateFeature(map: MapModel, ogcApiFeatureLayerUrl: URL, feature: Feature): EditingWorkflow;
     /**
      * Stops the edit mode and removes an existing {@link EditingWorkflow}.
      */
     stop(mapId: string): void;
     /**
-     * Removes the unfinished geometry from an existing {@link EditingWorkflow} without leaving the edit mode.
+     * Resets the unfinished geometry from an existing {@link EditingWorkflow} without leaving the edit mode.
      */
     reset(mapId: string): void;
 }

package/i18n/de.yaml

@@ -1,5 +1,7 @@
 messages:
   title: Editierung von Objekten
-  tooltip:
-    begin: Klicken, um mit Erstellung der Geometrie zu beginnen
-    continue: Doppelt klicken, um Geometrie abzuschließen und Feature zu speichern
+  create:
+    tooltip:
+      begin: Klicken, um mit Erstellung der Geometrie zu beginnen
+      continue: Doppelt klicken, um Geometrie abzuschließen und Feature zu speichern
+      deselect: Außerhalb der Geometrie in die Karte klicken, um Änderungen zu speichern

package/i18n/en.yaml

@@ -1,5 +1,7 @@
 messages:
   title: Editing
-  tooltip:
-    begin: Click to start creating the geometry
-    continue: Double click to finish the geometry and save the feature
+  create:
+    tooltip:
+      begin: Click to start creating the geometry
+      continue: Double click to finish the geometry and save the feature
+      deselect: Click outside the geometry in the map to save changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/editing",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "This package provides an editing service that allows to start and handle geometry editing workflows.",
   "keywords": [
     "open-pioneer-trails"
@@ -18,7 +18,7 @@
     "@open-pioneer/http": "^2.1.4",
     "@open-pioneer/runtime": "^2.1.2",
     "ol": "^9.0.0",
-    "@open-pioneer/map": "^0.4.0"
+    "@open-pioneer/map": "^0.5.0"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -68,15 +68,25 @@
     },
     "properties": [
       {
-        "propertyName": "polygonDrawStyle",
+        "propertyName": "polygonStyle",
         "defaultValue": {
-          "stroke-color": "yellow",
-          "stroke-width": 2,
-          "fill-color": "rgba(0, 0, 0, 0.1)",
-          "circle-radius": 5,
-          "circle-fill-color": "rgba(0, 0, 255, 0.2)",
-          "circle-stroke-color": "rgba(0, 0, 255, 0.7)",
-          "circle-stroke-width": 2
+          "fill-color": "rgba(255,255,255,0.4)",
+          "stroke-color": "red",
+          "stroke-width": 1.25,
+          "circle-radius": 3,
+          "circle-fill-color": "red",
+          "circle-stroke-width": 1.25,
+          "circle-stroke-color": "red"
+        },
+        "required": false
+      },
+      {
+        "propertyName": "vertexStyle",
+        "defaultValue": {
+          "circle-radius": 3,
+          "circle-fill-color": "red",
+          "circle-stroke-width": 1.25,
+          "circle-stroke-color": "red"
         },
         "required": false
       }