@vaadin/bundles 25.3.0-alpha13 → 25.3.0-alpha14

package/vendors-node_modules_vaadin_map_node_modules_ol_interaction_Modify_js.js

@@ -11,26 +11,28 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "ModifyEvent": () => (/* binding */ ModifyEvent),
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _Collection_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Collection.js */ "./node_modules/@vaadin/map/node_modules/ol/Collection.js");
-/* harmony import */ var _CollectionEventType_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../CollectionEventType.js */ "./node_modules/@vaadin/map/node_modules/ol/CollectionEventType.js");
-/* harmony import */ var _Feature_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../Feature.js */ "./node_modules/@vaadin/map/node_modules/ol/Feature.js");
-/* harmony import */ var _MapBrowserEventType_js__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../MapBrowserEventType.js */ "./node_modules/@vaadin/map/node_modules/ol/MapBrowserEventType.js");
-/* harmony import */ var _array_js__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../array.js */ "./node_modules/@vaadin/map/node_modules/ol/array.js");
-/* harmony import */ var _coordinate_js__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../coordinate.js */ "./node_modules/@vaadin/map/node_modules/ol/coordinate.js");
+/* harmony import */ var _Collection_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../Collection.js */ "./node_modules/@vaadin/map/node_modules/ol/Collection.js");
+/* harmony import */ var _CollectionEventType_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../CollectionEventType.js */ "./node_modules/@vaadin/map/node_modules/ol/CollectionEventType.js");
+/* harmony import */ var _Feature_js__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../Feature.js */ "./node_modules/@vaadin/map/node_modules/ol/Feature.js");
+/* harmony import */ var _MapBrowserEventType_js__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../MapBrowserEventType.js */ "./node_modules/@vaadin/map/node_modules/ol/MapBrowserEventType.js");
+/* harmony import */ var _ObjectEventType_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../ObjectEventType.js */ "./node_modules/@vaadin/map/node_modules/ol/ObjectEventType.js");
+/* harmony import */ var _array_js__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../array.js */ "./node_modules/@vaadin/map/node_modules/ol/array.js");
+/* harmony import */ var _coordinate_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../coordinate.js */ "./node_modules/@vaadin/map/node_modules/ol/coordinate.js");
 /* harmony import */ var _events_Event_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../events/Event.js */ "./node_modules/@vaadin/map/node_modules/ol/events/Event.js");
 /* harmony import */ var _events_EventType_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../events/EventType.js */ "./node_modules/@vaadin/map/node_modules/ol/events/EventType.js");
 /* harmony import */ var _events_condition_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../events/condition.js */ "./node_modules/@vaadin/map/node_modules/ol/events/condition.js");
-/* harmony import */ var _extent_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../extent.js */ "./node_modules/@vaadin/map/node_modules/ol/extent.js");
-/* harmony import */ var _geom_Point_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../geom/Point.js */ "./node_modules/@vaadin/map/node_modules/ol/geom/Point.js");
-/* harmony import */ var _geom_Polygon_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../geom/Polygon.js */ "./node_modules/@vaadin/map/node_modules/ol/geom/Polygon.js");
+/* harmony import */ var _extent_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../extent.js */ "./node_modules/@vaadin/map/node_modules/ol/extent.js");
+/* harmony import */ var _geom_Point_js__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../geom/Point.js */ "./node_modules/@vaadin/map/node_modules/ol/geom/Point.js");
+/* harmony import */ var _geom_Polygon_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../geom/Polygon.js */ "./node_modules/@vaadin/map/node_modules/ol/geom/Polygon.js");
 /* harmony import */ var _layer_Vector_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../layer/Vector.js */ "./node_modules/@vaadin/map/node_modules/ol/layer/Vector.js");
 /* harmony import */ var _proj_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../proj.js */ "./node_modules/@vaadin/map/node_modules/ol/proj.js");
 /* harmony import */ var _source_Vector_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../source/Vector.js */ "./node_modules/@vaadin/map/node_modules/ol/source/Vector.js");
-/* harmony import */ var _source_VectorEventType_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../source/VectorEventType.js */ "./node_modules/@vaadin/map/node_modules/ol/source/VectorEventType.js");
+/* harmony import */ var _source_VectorEventType_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../source/VectorEventType.js */ "./node_modules/@vaadin/map/node_modules/ol/source/VectorEventType.js");
 /* harmony import */ var _structs_RBush_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../structs/RBush.js */ "./node_modules/@vaadin/map/node_modules/ol/structs/RBush.js");
-/* harmony import */ var _style_Style_js__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../style/Style.js */ "./node_modules/@vaadin/map/node_modules/ol/style/Style.js");
-/* harmony import */ var _util_js__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../util.js */ "./node_modules/@vaadin/map/node_modules/ol/util.js");
+/* harmony import */ var _style_Style_js__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../style/Style.js */ "./node_modules/@vaadin/map/node_modules/ol/style/Style.js");
+/* harmony import */ var _util_js__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../util.js */ "./node_modules/@vaadin/map/node_modules/ol/util.js");
 /* harmony import */ var _Pointer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Pointer.js */ "./node_modules/@vaadin/map/node_modules/ol/interaction/Pointer.js");
+/* harmony import */ var _tracing_js__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./tracing.js */ "./node_modules/@vaadin/map/node_modules/ol/interaction/tracing.js");
 /**
  * @module ol/interaction/Modify
  */
@@ -52,6 +54,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
 
 
 
@@ -100,6 +104,12 @@ const ModifyEventType = {
  * @property {Array<SegmentData>} [featureSegments] FeatureSegments.
  */
 
+/**
+ * A function that takes a {@link module:ol/Feature~Feature} and  returns `true` if
+ * the feature may be modified or `false` otherwise.
+ * @typedef {function(Feature):boolean} FilterFunction
+ */
+
 /**
  * @typedef {[SegmentData, number]} DragSegment
  */
@@ -116,6 +126,14 @@ const ModifyEventType = {
  * boolean to indicate whether that event should be handled. By default,
  * {@link module:ol/events/condition.singleClick} with
  * {@link module:ol/events/condition.altKeyOnly} results in a vertex deletion.
+ * This combination is handled by wrapping the two condition checks in a single function:
+ * ```js
+ * import { altKeyOnly, singleClick } from 'ol/events/condition.js';
+ *
+ * function (event) {
+ *   return altKeyOnly(event) && singleClick(event)
+ * }
+ * ```
  * @property {import("../events/condition.js").Condition} [insertVertexCondition] A
  * function that takes a {@link module:ol/MapBrowserEvent~MapBrowserEvent} and
  * returns a boolean to indicate whether a new vertex should be added to the sketch
@@ -135,19 +153,51 @@ const ModifyEventType = {
  * @property {VectorSource} [source] The vector source with
  * features to modify.  If a vector source is not provided, a feature collection
  * must be provided with the `features` option.
- * @property {boolean|import("../layer/BaseVector").default} [hitDetection] When configured, point
+ * @property {boolean|import("../layer/BaseVector.js").default} [hitDetection] When configured, point
  * features will be considered for modification based on their visual appearance, instead of being within
  * the `pixelTolerance` from the pointer location. When a {@link module:ol/layer/BaseVector~BaseVectorLayer} is
  * provided, only the rendered representation of the features on that layer will be considered.
  * @property {Collection<Feature>} [features]
  * The features the interaction works on.  If a feature collection is not
  * provided, a vector source must be provided with the `source` option.
+ * @property {FilterFunction} [filter] A function that takes a {@link module:ol/Feature~Feature}
+ * and returns `true` if the feature may be modified or `false` otherwise.
+ * @property {boolean|import("../events/condition.js").Condition} [trace=false] Trace a portion of another geometry.
+ * Tracing starts when two neighboring vertices are dragged onto a trace target, without any other modification in between..
+ * @property {VectorSource} [traceSource] Source for features to trace.  If tracing is active and a `traceSource` is
+ * not provided, the interaction's `source` will be used.  Tracing requires that the interaction is configured with
+ * either a `traceSource` or a `source`.
  * @property {boolean} [wrapX=false] Wrap the world horizontally on the sketch
  * overlay.
  * @property {boolean} [snapToPointer=!hitDetection] The vertex, point or segment being modified snaps to the
  * pointer coordinate when clicked within the `pixelTolerance`.
+ * @property {function(import("../coordinate.js").Coordinate, import("../coordinate.js").Coordinate): boolean} [sharedVerticesEqual]
+ * A function that takes two coordinates and returns whether they should be
+ * considered equal for vertex matching purposes. By default, all coordinate
+ * dimensions are compared. This is useful when features have mixed coordinate
+ * dimensions (e.g., XY and XYZ) but should still be treated as sharing vertices
+ * at the same 2D position.
  */
 
+function getCoordinatesArray(coordinates, geometryType, depth) {
+  let coordinatesArray;
+  switch (geometryType) {
+    case 'LineString':
+      coordinatesArray = coordinates;
+      break;
+    case 'MultiLineString':
+    case 'Polygon':
+      coordinatesArray = coordinates[depth[0]];
+      break;
+    case 'MultiPolygon':
+      coordinatesArray = coordinates[depth[1]][depth[0]];
+      break;
+    default:
+    // pass
+  }
+  return coordinatesArray;
+}
+
 /**
  * @classdesc
  * Events emitted by {@link module:ol/interaction/Modify~Modify} instances are
@@ -182,11 +232,11 @@ class ModifyEvent extends _events_Event_js__WEBPACK_IMPORTED_MODULE_1__["default
 
 /***
  * @template Return
- * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> &
- *   import("../Observable").OnSignature<import("../ObjectEventType").Types|
- *     'change:active', import("../Object").ObjectEvent, Return> &
- *   import("../Observable").OnSignature<'modifyend'|'modifystart', ModifyEvent, Return> &
- *   import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("../ObjectEventType").Types|
+ * @typedef {import("../Observable.js").OnSignature<import("../Observable.js").EventTypes, import("../events/Event.js").default, Return> &
+ *   import("../Observable.js").OnSignature<import("../ObjectEventType.js").Types|
+ *     'change:active', import("../Object.js").ObjectEvent, Return> &
+ *   import("../Observable.js").OnSignature<'modifyend'|'modifystart', ModifyEvent, Return> &
+ *   import("../Observable.js").CombinedOnSignature<import("../Observable.js").EventTypes|import("../ObjectEventType.js").Types|
  *     'change:active'|'modifyend'|'modifystart', Return>} ModifyOnSignature
  */
 
@@ -218,13 +268,31 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
   constructor(options) {
     super(/** @type {import("./Pointer.js").Options} */ (options));
 
+    //Maintain a ref to event handlers for later unregistering
+    /** @private */
+    this.handleSourceAdd_ = this.handleSourceAdd_.bind(this);
+
+    /** @private */
+    this.handleSourceRemove_ = this.handleSourceRemove_.bind(this);
+
+    /** @private */
+    this.handleExternalCollectionAdd_ =
+      this.handleExternalCollectionAdd_.bind(this);
+
+    /** @private */
+    this.handleExternalCollectionRemove_ =
+      this.handleExternalCollectionRemove_.bind(this);
+
+    /** @private */
+    this.handleFeatureChange_ = this.handleFeatureChange_.bind(this);
+
     /***
-     * @type {ModifyOnSignature<import("../events").EventsKey>}
+     * @type {ModifyOnSignature<import("../events.js").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {ModifyOnSignature<import("../events").EventsKey>}
+     * @type {ModifyOnSignature<import("../events.js").EventsKey>}
      */
     this.once;
 
@@ -233,9 +301,6 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
      */
     this.un;
 
-    /** @private */
-    this.boundHandleFeatureChange_ = this.handleFeatureChange_.bind(this);
-
     /**
      * @private
      * @type {import("../events/condition.js").Condition}
@@ -282,10 +347,10 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
     this.vertexSegments_ = null;
 
     /**
-     * @type {import("../pixel.js").Pixel}
+     * @type {import("../coordinate.js").Coordinate}
      * @private
      */
-    this.lastPixel_ = [0, 0];
+    this.lastCoordinate_ = [0, 0];
 
     /**
      * Tracks if the next `singleclick` event should be ignored to prevent
@@ -356,15 +421,15 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
      * @type {!Object<string, function(Feature, import("../geom/Geometry.js").default): void>}
      */
     this.SEGMENT_WRITERS_ = {
-      'Point': this.writePointGeometry_.bind(this),
-      'LineString': this.writeLineStringGeometry_.bind(this),
-      'LinearRing': this.writeLineStringGeometry_.bind(this),
-      'Polygon': this.writePolygonGeometry_.bind(this),
-      'MultiPoint': this.writeMultiPointGeometry_.bind(this),
-      'MultiLineString': this.writeMultiLineStringGeometry_.bind(this),
-      'MultiPolygon': this.writeMultiPolygonGeometry_.bind(this),
-      'Circle': this.writeCircleGeometry_.bind(this),
-      'GeometryCollection': this.writeGeometryCollectionGeometry_.bind(this),
+      Point: this.writePointGeometry_.bind(this),
+      LineString: this.writeLineStringGeometry_.bind(this),
+      LinearRing: this.writeLineStringGeometry_.bind(this),
+      Polygon: this.writePolygonGeometry_.bind(this),
+      MultiPoint: this.writeMultiPointGeometry_.bind(this),
+      MultiLineString: this.writeMultiLineStringGeometry_.bind(this),
+      MultiPolygon: this.writeMultiPolygonGeometry_.bind(this),
+      Circle: this.writeCircleGeometry_.bind(this),
+      GeometryCollection: this.writeGeometryCollectionGeometry_.bind(this),
     };
 
     /**
@@ -374,51 +439,118 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
     this.source_ = null;
 
     /**
-     * @type {boolean|import("../layer/BaseVector").default}
+     * @type {VectorSource|null}
+     * @private
+     */
+    this.traceSource_ = options.traceSource || options.source || null;
+
+    /**
+     * @type {import("../events/condition.js").Condition}
+     * @private
+     */
+    this.traceCondition_;
+    this.setTrace(options.trace || false);
+
+    /**
+     * @type {import('./tracing.js').TraceState}
+     * @private
+     */
+    this.traceState_ = {active: false};
+
+    /**
+     * @type {Array<DragSegment>|null}
+     * @private
+     */
+    this.traceSegments_ = null;
+
+    /**
+     * @type {boolean|import("../layer/BaseVector.js").default}
      * @private
      */
     this.hitDetection_ = null;
 
-    /** @type {Collection<Feature>} */
+    /**
+     * Useful for performance optimization
+     * @private
+     * @type boolean
+     */
+    this.filterFunctionWasSupplied_ =
+      options.filter != undefined ? true : false;
+
+    /**
+     * @private
+     * @type {FilterFunction}
+     */
+    this.filter_ = options.filter ? options.filter : () => true;
+
+    /**
+     * @private
+     * @type {function(import("../coordinate.js").Coordinate, import("../coordinate.js").Coordinate): boolean}
+     */
+    this.coordinatesEqual_ = options.sharedVerticesEqual
+      ? options.sharedVerticesEqual
+      : _coordinate_js__WEBPACK_IMPORTED_MODULE_7__.equals;
+
+    if (!(options.features || options.source)) {
+      throw new Error(
+        'The modify interaction requires features collection or a source',
+      );
+    }
+    /** @type {Array<Feature>} */
     let features;
     if (options.features) {
-      features = options.features;
-    } else if (options.source) {
-      this.source_ = options.source;
-      features = new _Collection_js__WEBPACK_IMPORTED_MODULE_7__["default"](this.source_.getFeatures());
-      this.source_.addEventListener(
-        _source_VectorEventType_js__WEBPACK_IMPORTED_MODULE_8__["default"].ADDFEATURE,
-        this.handleSourceAdd_.bind(this),
+      features = options.features.getArray();
+      //setup listeners on external features collection and features
+      options.features.addEventListener(
+        _CollectionEventType_js__WEBPACK_IMPORTED_MODULE_8__["default"].ADD,
+        this.handleExternalCollectionAdd_,
       );
-      this.source_.addEventListener(
-        _source_VectorEventType_js__WEBPACK_IMPORTED_MODULE_8__["default"].REMOVEFEATURE,
-        this.handleSourceRemove_.bind(this),
+      options.features.addEventListener(
+        _CollectionEventType_js__WEBPACK_IMPORTED_MODULE_8__["default"].REMOVE,
+        this.handleExternalCollectionRemove_,
       );
-    }
-    if (!features) {
-      throw new Error(
-        'The modify interaction requires features, a source or a layer',
+      //keep ref for unsubscribe on dispose
+      this.featuresCollection_ = options.features;
+    } else if (options.source) {
+      features = options.source.getFeatures();
+      //setup listeners on external source and features
+      options.source.addEventListener(
+        _source_VectorEventType_js__WEBPACK_IMPORTED_MODULE_9__["default"].ADDFEATURE,
+        this.handleSourceAdd_,
+      );
+      options.source.addEventListener(
+        _source_VectorEventType_js__WEBPACK_IMPORTED_MODULE_9__["default"].REMOVEFEATURE,
+        this.handleSourceRemove_,
       );
+      //keep ref for unsubscribe on dispose
+      this.source_ = options.source;
     }
+    features.forEach((feature) => {
+      //any modification to the feature requires filter to be re-run
+      feature.addEventListener(_events_EventType_js__WEBPACK_IMPORTED_MODULE_10__["default"].CHANGE, this.handleFeatureChange_);
+      //prop change handler is only to re-run the filter
+      if (this.filterFunctionWasSupplied_) {
+        feature.addEventListener(
+          _ObjectEventType_js__WEBPACK_IMPORTED_MODULE_11__["default"].PROPERTYCHANGE,
+          this.handleFeatureChange_,
+        );
+      }
+    });
+
     if (options.hitDetection) {
       this.hitDetection_ = options.hitDetection;
     }
 
     /**
-     * @type {Collection<Feature>}
+     * Internal features array.  When adding or removing features, be sure to use
+     * addFeature_()/removeFeature_() so that the the segment index is adjusted.
+     * @type {Array<Feature>}
      * @private
      */
-    this.features_ = features;
-
-    this.features_.forEach(this.addFeature_.bind(this));
-    this.features_.addEventListener(
-      _CollectionEventType_js__WEBPACK_IMPORTED_MODULE_9__["default"].ADD,
-      this.handleFeatureAdd_.bind(this),
-    );
-    this.features_.addEventListener(
-      _CollectionEventType_js__WEBPACK_IMPORTED_MODULE_9__["default"].REMOVE,
-      this.handleFeatureRemove_.bind(this),
-    );
+    this.features_ = [];
+    features
+      .filter(this.filter_)
+      .forEach((feature) => this.addFeature_(feature));
 
     /**
      * @type {import("../MapBrowserEvent.js").default}
@@ -443,10 +575,30 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
   }
 
   /**
+   * Toggle tracing mode or set a tracing condition.
+   *
+   * @param {boolean|import("../events/condition.js").Condition} trace A boolean to toggle tracing mode or an event
+   *     condition that will be checked when a feature is clicked to determine if tracing should be active.
+   */
+  setTrace(trace) {
+    let condition;
+    if (!trace) {
+      condition = _events_condition_js__WEBPACK_IMPORTED_MODULE_3__.never;
+    } else if (trace === true) {
+      condition = _events_condition_js__WEBPACK_IMPORTED_MODULE_3__.always;
+    } else {
+      condition = trace;
+    }
+    this.traceCondition_ = condition;
+  }
+
+  /**
+   * Called when a feature is added to the internal features collection
    * @param {Feature} feature Feature.
    * @private
    */
   addFeature_(feature) {
+    this.features_.push(feature);
     const geometry = feature.getGeometry();
     if (geometry) {
       const writer = this.SEGMENT_WRITERS_[geometry.getType()];
@@ -456,9 +608,8 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
     }
     const map = this.getMap();
     if (map && map.isRendered() && this.getActive()) {
-      this.handlePointerAtPixel_(map.getCoordinateFromPixel(this.lastPixel_));
+      this.handlePointerAtPixel_(this.lastCoordinate_);
     }
-    feature.addEventListener(_events_EventType_js__WEBPACK_IMPORTED_MODULE_10__["default"].CHANGE, this.boundHandleFeatureChange_);
   }
 
   /**
@@ -468,7 +619,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
    */
   willModifyFeatures_(evt, segments) {
     if (!this.featuresBeingModified_) {
-      this.featuresBeingModified_ = new _Collection_js__WEBPACK_IMPORTED_MODULE_7__["default"]();
+      this.featuresBeingModified_ = new _Collection_js__WEBPACK_IMPORTED_MODULE_12__["default"]();
       const features = this.featuresBeingModified_.getArray();
       for (let i = 0, ii = segments.length; i < ii; ++i) {
         const feature = segments[i].feature;
@@ -491,20 +642,20 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
   }
 
   /**
+   * Removes a feature from the internal features collection and updates internal state
+   * accordingly.
    * @param {Feature} feature Feature.
    * @private
    */
   removeFeature_(feature) {
+    const itemIndex = this.features_.indexOf(feature);
+    this.features_.splice(itemIndex, 1);
     this.removeFeatureSegmentData_(feature);
     // Remove the vertex feature if the collection of candidate features is empty.
-    if (this.vertexFeature_ && this.features_.getLength() === 0) {
+    if (this.vertexFeature_ && this.features_.length === 0) {
       this.overlay_.getSource().removeFeature(this.vertexFeature_);
       this.vertexFeature_ = null;
     }
-    feature.removeEventListener(
-      _events_EventType_js__WEBPACK_IMPORTED_MODULE_10__["default"].CHANGE,
-      this.boundHandleFeatureChange_,
-    );
   }
 
   /**
@@ -577,8 +728,9 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
    * @private
    */
   handleSourceAdd_(event) {
-    if (event.feature) {
-      this.features_.push(event.feature);
+    const feature = event.feature;
+    if (feature) {
+      this.externalAddFeatureHandler_(feature);
     }
   }
 
@@ -587,37 +739,83 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
    * @private
    */
   handleSourceRemove_(event) {
-    if (event.feature) {
-      this.features_.remove(event.feature);
+    const feature = event.feature;
+    if (feature) {
+      this.externalRemoveFeatureHandler_(feature);
     }
   }
 
   /**
-   * @param {import("../Collection.js").CollectionEvent<Feature>} evt Event.
+   * @param {import("../Collection.js").CollectionEvent} event Event.
    * @private
    */
-  handleFeatureAdd_(evt) {
-    this.addFeature_(evt.element);
+  handleExternalCollectionAdd_(event) {
+    const feature = event.element;
+    if (feature) {
+      this.externalAddFeatureHandler_(feature);
+    }
   }
 
   /**
-   * @param {import("../events/Event.js").default} evt Event.
+   * @param {import("../Collection.js").CollectionEvent} event Event.
    * @private
    */
-  handleFeatureChange_(evt) {
-    if (!this.changingFeature_) {
-      const feature = /** @type {Feature} */ (evt.target);
-      this.removeFeature_(feature);
+  handleExternalCollectionRemove_(event) {
+    const feature = event.element;
+    if (feature) {
+      this.externalRemoveFeatureHandler_(feature);
+    }
+  }
+
+  /**
+   * Common handler for event signaling addition of feature to the supplied features source
+   * or collection.
+   * @param {Feature} feature Feature.
+   */
+  externalAddFeatureHandler_(feature) {
+    feature.addEventListener(_events_EventType_js__WEBPACK_IMPORTED_MODULE_10__["default"].CHANGE, this.handleFeatureChange_);
+    //prop change handler is only for reapplying the filter
+    if (this.filterFunctionWasSupplied_) {
+      feature.addEventListener(
+        _ObjectEventType_js__WEBPACK_IMPORTED_MODULE_11__["default"].PROPERTYCHANGE,
+        this.handleFeatureChange_,
+      );
+    }
+    if (this.filter_(feature)) {
       this.addFeature_(feature);
     }
   }
 
   /**
-   * @param {import("../Collection.js").CollectionEvent<Feature>} evt Event.
+   * Common handler for event signaling removal of feature from the supplied features source
+   * or collection.
+   * @param {Feature} feature Feature.
+   */
+  externalRemoveFeatureHandler_(feature) {
+    feature.removeEventListener(_events_EventType_js__WEBPACK_IMPORTED_MODULE_10__["default"].CHANGE, this.handleFeatureChange_);
+    if (this.filterFunctionWasSupplied_) {
+      feature.removeEventListener(
+        _ObjectEventType_js__WEBPACK_IMPORTED_MODULE_11__["default"].PROPERTYCHANGE,
+        this.handleFeatureChange_,
+      );
+    }
+    this.removeFeature_(feature);
+  }
+
+  /**
+   * Listener for features in external source or features collection.  Ensures the feature filter
+   * is re-run and segment data is updated.
+   * @param {import("../events/Event.js").default | import("../Object.js").ObjectEvent} evt Event.
    * @private
    */
-  handleFeatureRemove_(evt) {
-    this.removeFeature_(evt.element);
+  handleFeatureChange_(evt) {
+    if (!this.changingFeature_) {
+      const feature = /** @type {Feature} */ (evt.target);
+      this.removeFeature_(feature);
+      //safe to remove handler on a feature if there isn't one, but need to apply the filter
+      // before adding the feature.
+      this.filter_(feature) && this.addFeature_(feature);
+    }
   }
 
   /**
@@ -679,7 +877,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
         segment: segment,
       };
 
-      this.rBush_.insert((0,_extent_js__WEBPACK_IMPORTED_MODULE_11__.boundingExtent)(segment), segmentData);
+      this.rBush_.insert((0,_extent_js__WEBPACK_IMPORTED_MODULE_13__.boundingExtent)(segment), segmentData);
     }
   }
 
@@ -704,7 +902,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
           segment: segment,
         };
 
-        this.rBush_.insert((0,_extent_js__WEBPACK_IMPORTED_MODULE_11__.boundingExtent)(segment), segmentData);
+        this.rBush_.insert((0,_extent_js__WEBPACK_IMPORTED_MODULE_13__.boundingExtent)(segment), segmentData);
       }
     }
   }
@@ -730,7 +928,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
           segment: segment,
         };
 
-        this.rBush_.insert((0,_extent_js__WEBPACK_IMPORTED_MODULE_11__.boundingExtent)(segment), segmentData);
+        this.rBush_.insert((0,_extent_js__WEBPACK_IMPORTED_MODULE_13__.boundingExtent)(segment), segmentData);
       }
     }
   }
@@ -758,7 +956,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
             segment: segment,
           };
 
-          this.rBush_.insert((0,_extent_js__WEBPACK_IMPORTED_MODULE_11__.boundingExtent)(segment), segmentData);
+          this.rBush_.insert((0,_extent_js__WEBPACK_IMPORTED_MODULE_13__.boundingExtent)(segment), segmentData);
         }
       }
     }
@@ -797,7 +995,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
     const featureSegments = [centerSegmentData, circumferenceSegmentData];
     centerSegmentData.featureSegments = featureSegments;
     circumferenceSegmentData.featureSegments = featureSegments;
-    this.rBush_.insert((0,_extent_js__WEBPACK_IMPORTED_MODULE_11__.createOrUpdateFromCoordinate)(coordinates), centerSegmentData);
+    this.rBush_.insert((0,_extent_js__WEBPACK_IMPORTED_MODULE_13__.createOrUpdateFromCoordinate)(coordinates), centerSegmentData);
     let circleGeometry = /** @type {import("../geom/Geometry.js").default} */ (
       geometry
     );
@@ -807,7 +1005,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
       circleGeometry = circleGeometry
         .clone()
         .transform(userProjection, projection);
-      circleGeometry = (0,_geom_Polygon_js__WEBPACK_IMPORTED_MODULE_12__.fromCircle)(
+      circleGeometry = (0,_geom_Polygon_js__WEBPACK_IMPORTED_MODULE_14__.fromCircle)(
         /** @type {import("../geom/Circle.js").default} */ (circleGeometry),
       ).transform(projection, userProjection);
     }
@@ -839,7 +1037,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
   createOrUpdateVertexFeature_(coordinates, features, geometries, existing) {
     let vertexFeature = this.vertexFeature_;
     if (!vertexFeature) {
-      vertexFeature = new _Feature_js__WEBPACK_IMPORTED_MODULE_13__["default"](new _geom_Point_js__WEBPACK_IMPORTED_MODULE_14__["default"](coordinates));
+      vertexFeature = new _Feature_js__WEBPACK_IMPORTED_MODULE_15__["default"](new _geom_Point_js__WEBPACK_IMPORTED_MODULE_16__["default"](coordinates));
       this.vertexFeature_ = vertexFeature;
       this.overlay_.getSource().addFeature(vertexFeature);
     } else {
@@ -867,14 +1065,14 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
     let handled;
     if (
       !mapBrowserEvent.map.getView().getInteracting() &&
-      mapBrowserEvent.type == _MapBrowserEventType_js__WEBPACK_IMPORTED_MODULE_15__["default"].POINTERMOVE &&
+      mapBrowserEvent.type == _MapBrowserEventType_js__WEBPACK_IMPORTED_MODULE_17__["default"].POINTERMOVE &&
       !this.handlingDownUpSequence
     ) {
       this.handlePointerMove_(mapBrowserEvent);
     }
     if (this.vertexFeature_ && this.deleteCondition_(mapBrowserEvent)) {
       if (
-        mapBrowserEvent.type != _MapBrowserEventType_js__WEBPACK_IMPORTED_MODULE_15__["default"].SINGLECLICK ||
+        mapBrowserEvent.type != _MapBrowserEventType_js__WEBPACK_IMPORTED_MODULE_17__["default"].SINGLECLICK ||
         !this.ignoreNextSingleClick_
       ) {
         handled = this.removePoint();
@@ -883,13 +1081,18 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
       }
     }
 
-    if (mapBrowserEvent.type == _MapBrowserEventType_js__WEBPACK_IMPORTED_MODULE_15__["default"].SINGLECLICK) {
+    if (mapBrowserEvent.type == _MapBrowserEventType_js__WEBPACK_IMPORTED_MODULE_17__["default"].SINGLECLICK) {
       this.ignoreNextSingleClick_ = false;
     }
 
     return super.handleEvent(mapBrowserEvent) && !handled;
   }
 
+  /**
+   * @param {import("../coordinate.js").Coordinate} pixelCoordinate Pixel coordinate.
+   * @return {Array<SegmentData>|undefined} Insert vertices and update drag segments.
+   * @private
+   */
   findInsertVerticesAndUpdateDragSegments_(pixelCoordinate) {
     this.handlePointerAtPixel_(pixelCoordinate);
     this.dragSegments_.length = 0;
@@ -900,16 +1103,17 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
     }
 
     const projection = this.getMap().getView().getProjection();
+    /** @type {Array<SegmentData>} */
     const insertVertices = [];
-    const vertex = vertexFeature.getGeometry().getCoordinates();
-    const vertexExtent = (0,_extent_js__WEBPACK_IMPORTED_MODULE_11__.boundingExtent)([vertex]);
+    const vertex = this.vertexFeature_.getGeometry().getCoordinates();
+    const vertexExtent = (0,_extent_js__WEBPACK_IMPORTED_MODULE_13__.boundingExtent)([vertex]);
     const segmentDataMatches = this.rBush_.getInExtent(vertexExtent);
     const componentSegments = {};
     segmentDataMatches.sort(compareIndexes);
     for (let i = 0, ii = segmentDataMatches.length; i < ii; ++i) {
       const segmentDataMatch = segmentDataMatches[i];
       const segment = segmentDataMatch.segment;
-      let uid = (0,_util_js__WEBPACK_IMPORTED_MODULE_16__.getUid)(segmentDataMatch.geometry);
+      let uid = (0,_util_js__WEBPACK_IMPORTED_MODULE_18__.getUid)(segmentDataMatch.geometry);
       const depth = segmentDataMatch.depth;
       if (depth) {
         uid += '-' + depth.join('-'); // separate feature components
@@ -928,7 +1132,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
           projection,
         );
         if (
-          (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.equals)(closestVertex, vertex) &&
+          this.coordinatesEqual_(closestVertex, vertex) &&
           !componentSegments[uid][0]
         ) {
           this.dragSegments_.push([segmentDataMatch, 0]);
@@ -937,13 +1141,19 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
         continue;
       }
 
-      if ((0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.equals)(segment[0], vertex) && !componentSegments[uid][0]) {
+      if (
+        this.coordinatesEqual_(segment[0], vertex) &&
+        !componentSegments[uid][0]
+      ) {
         this.dragSegments_.push([segmentDataMatch, 0]);
         componentSegments[uid][0] = segmentDataMatch;
         continue;
       }
 
-      if ((0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.equals)(segment[1], vertex) && !componentSegments[uid][1]) {
+      if (
+        this.coordinatesEqual_(segment[1], vertex) &&
+        !componentSegments[uid][1]
+      ) {
         if (
           componentSegments[uid][0] &&
           componentSegments[uid][0].index === 0
@@ -975,7 +1185,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
       }
 
       if (
-        (0,_util_js__WEBPACK_IMPORTED_MODULE_16__.getUid)(segment) in this.vertexSegments_ &&
+        (0,_util_js__WEBPACK_IMPORTED_MODULE_18__.getUid)(segment) in this.vertexSegments_ &&
         !componentSegments[uid][0] &&
         !componentSegments[uid][1]
       ) {
@@ -986,6 +1196,491 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
     return insertVertices;
   }
 
+  /**
+   * @private
+   */
+  deactivateTrace_() {
+    this.traceState_ = {active: false};
+  }
+
+  /**
+   * Determine whether a trace from `fromIndex` to `toIndex` passes at least one
+   * vertex of the target (i.e. whether it would add any traced coordinates).
+   * The index math mirrors {@link addTracedCoordinates_}.
+   * @param {number} fromIndex The start index.
+   * @param {number} toIndex The end index.
+   * @return {boolean} At least one target vertex lies between the indices.
+   * @private
+   */
+  tracePassesVertex_(fromIndex, toIndex) {
+    if (fromIndex === toIndex) {
+      return false;
+    }
+    if (fromIndex < toIndex) {
+      const start = Math.ceil(fromIndex);
+      let end = Math.floor(toIndex);
+      if (end === toIndex) {
+        end -= 1;
+      }
+      return start <= end;
+    }
+    const start = Math.floor(fromIndex);
+    let end = Math.ceil(toIndex);
+    if (end === toIndex) {
+      end += 1;
+    }
+    return start >= end;
+  }
+
+  /**
+   * Update the trace.
+   * @param {import("../MapBrowserEvent.js").default} event Event.
+   * @return {import('../coordinate.js').Coordinate|undefined} The coordinate the
+   * dragged vertex was snapped onto a target edge, if any.
+   * @private
+   */
+  updateTrace_(event) {
+    const traceState = this.traceState_;
+    if (!traceState.active) {
+      return;
+    }
+
+    if (traceState.targetIndex === -1) {
+      // check if we are ready to pick a target
+      const startPx = event.map.getPixelFromCoordinate(traceState.startCoord);
+      if ((0,_coordinate_js__WEBPACK_IMPORTED_MODULE_7__.distance)(startPx, event.pixel) < this.pixelTolerance_) {
+        return;
+      }
+    }
+
+    const updatedTraceTarget = (0,_tracing_js__WEBPACK_IMPORTED_MODULE_19__.getTraceTargetUpdate)(
+      event.coordinate,
+      traceState,
+      event.map,
+      this.pixelTolerance_,
+    );
+
+    if (
+      traceState.targetIndex === -1 &&
+      Math.sqrt(updatedTraceTarget.closestTargetDistance) /
+        event.map.getView().getResolution() >
+        this.pixelTolerance_
+    ) {
+      return;
+    }
+
+    // Only commit to tracing a target once the drag has passed one of its
+    // vertices.  Before that we still snap the dragged vertex onto the target
+    // edge (below), but we keep `targetIndex` at -1 so that pulling the pointer
+    // beyond the tolerance releases the vertex instead of getting stuck on the
+    // target.
+    let commit = true;
+    if (traceState.targetIndex === -1) {
+      const candidateTarget = traceState.targets[updatedTraceTarget.index];
+      commit = this.tracePassesVertex_(
+        candidateTarget.startIndex,
+        updatedTraceTarget.endIndex,
+      );
+    }
+
+    if (commit) {
+      if (traceState.targetIndex !== updatedTraceTarget.index) {
+        // target changed
+        if (traceState.targetIndex !== -1) {
+          // remove points added during previous trace
+          const oldTarget = traceState.targets[traceState.targetIndex];
+          this.removeTracedCoordinates_(
+            oldTarget.startIndex,
+            oldTarget.endIndex,
+          );
+        }
+        // add points for the new target
+        const newTarget = traceState.targets[updatedTraceTarget.index];
+        this.addTracedCoordinates_(
+          newTarget,
+          newTarget.startIndex,
+          updatedTraceTarget.endIndex,
+        );
+      } else {
+        // target stayed the same
+        const target = traceState.targets[traceState.targetIndex];
+        this.addOrRemoveTracedCoordinates_(target, updatedTraceTarget.endIndex);
+      }
+
+      // modify the state with updated info
+      traceState.targetIndex = updatedTraceTarget.index;
+      traceState.targets[traceState.targetIndex].endIndex =
+        updatedTraceTarget.endIndex;
+    }
+
+    // Snap the dragged vertex (the moving end of the trace) onto the target
+    // edge so that the trace follows edges, not only vertices, and the geometry
+    // stays consistent with the vertex marker.  Moving all of the dragged
+    // vertex' segments keeps polygon rings closed.
+    const snapTarget = traceState.targets[updatedTraceTarget.index];
+    const snappedVertex = (0,_tracing_js__WEBPACK_IMPORTED_MODULE_19__.interpolateCoordinate)(
+      snapTarget.coordinates,
+      updatedTraceTarget.endIndex,
+    );
+    for (const dragSegment of this.dragSegments_) {
+      this.updateGeometry_(snappedVertex.slice(), dragSegment);
+    }
+    return snappedVertex;
+  }
+
+  getTraceCandidates_(event) {
+    const map = this.getMap();
+    const tolerance = this.pixelTolerance_;
+    const lowerLeft = map.getCoordinateFromPixel([
+      event.pixel[0] - tolerance,
+      event.pixel[1] + tolerance,
+    ]);
+    const upperRight = map.getCoordinateFromPixel([
+      event.pixel[0] + tolerance,
+      event.pixel[1] - tolerance,
+    ]);
+    const extent = (0,_extent_js__WEBPACK_IMPORTED_MODULE_13__.boundingExtent)([lowerLeft, upperRight]);
+    const features = this.traceSource_.getFeaturesInExtent(extent);
+    return features;
+  }
+
+  /**
+   * Activate or deactivate trace state based on a browser event.
+   * @param {import("../MapBrowserEvent.js").default} event Event.
+   * @private
+   */
+  toggleTraceState_(event) {
+    if (!this.traceSource_ || !this.traceCondition_(event)) {
+      return;
+    }
+
+    if (this.traceState_.active) {
+      this.deactivateTrace_();
+      this.traceSegments_ = null;
+      return;
+    }
+
+    const features = this.getTraceCandidates_(event);
+    if (features.length === 0) {
+      return;
+    }
+
+    const targets = (0,_tracing_js__WEBPACK_IMPORTED_MODULE_19__.getTraceTargets)(event.coordinate, features);
+    if (targets.length) {
+      this.traceState_ = {
+        active: true,
+        startCoord: event.coordinate.slice(),
+        targets: targets,
+        targetIndex: -1,
+      };
+    }
+  }
+
+  /**
+   * @param {import('./tracing.js').TraceTarget} target The trace target.
+   * @param {number} endIndex The new end index of the trace.
+   * @private
+   */
+  addOrRemoveTracedCoordinates_(target, endIndex) {
+    // three cases to handle:
+    //  1. traced in the same direction and points need adding
+    //  2. traced in the same direction and points need removing
+    //  3. traced in a new direction
+    const previouslyForward = target.startIndex <= target.endIndex;
+    const currentlyForward = target.startIndex <= endIndex;
+    if (previouslyForward === currentlyForward) {
+      // same direction
+      if (
+        (previouslyForward && endIndex > target.endIndex) ||
+        (!previouslyForward && endIndex < target.endIndex)
+      ) {
+        // case 1 - add new points
+        this.addTracedCoordinates_(target, target.endIndex, endIndex);
+      } else if (
+        (previouslyForward && endIndex < target.endIndex) ||
+        (!previouslyForward && endIndex > target.endIndex)
+      ) {
+        // case 2 - remove old points
+        this.removeTracedCoordinates_(endIndex, target.endIndex);
+      }
+    } else {
+      // case 3 - remove old points, add new points
+      this.removeTracedCoordinates_(target.startIndex, target.endIndex);
+      this.addTracedCoordinates_(target, target.startIndex, endIndex);
+    }
+  }
+
+  /**
+   * Tracing splices coordinates into a ring next to the dragged vertex, but only
+   * adjusts the index of the trace segment itself.  The dragged vertex' other
+   * segments in `dragSegments_` reference the same ring, so their stored index
+   * must be shifted too - otherwise the next {@link updateGeometry_} writes the
+   * dragged vertex to the wrong coordinate and scrambles the ring.
+   * @param {SegmentData} traceSegmentData The trace segment (adjusted by the
+   * caller and skipped here).
+   * @param {number} atIndex Segments at or after this coordinate index shift.
+   * @param {number} delta Coordinates added (positive) or removed (negative).
+   * @private
+   */
+  shiftTracedSegmentIndices_(traceSegmentData, atIndex, delta) {
+    for (const dragSegment of this.dragSegments_) {
+      const segmentData = dragSegment[0];
+      if (
+        segmentData !== traceSegmentData &&
+        segmentData.geometry === traceSegmentData.geometry &&
+        (segmentData.depth === undefined ||
+          traceSegmentData.depth === undefined ||
+          (0,_array_js__WEBPACK_IMPORTED_MODULE_20__.equals)(segmentData.depth, traceSegmentData.depth)) &&
+        segmentData.index >= atIndex
+      ) {
+        segmentData.index += delta;
+      }
+    }
+  }
+
+  /**
+   * @param {number} fromIndex The start index.
+   * @param {number} toIndex The end index.
+   * @private
+   */
+  removeTracedCoordinates_(fromIndex, toIndex) {
+    if (fromIndex === toIndex) {
+      return;
+    }
+
+    let remove = 0;
+    if (fromIndex < toIndex) {
+      const start = Math.ceil(fromIndex);
+      let end = Math.floor(toIndex);
+      if (end === toIndex) {
+        end -= 1;
+      }
+      remove = end - start + 1;
+    } else {
+      const start = Math.floor(fromIndex);
+      let end = Math.ceil(toIndex);
+      if (end === toIndex) {
+        end += 1;
+      }
+      remove = start - end + 1;
+    }
+
+    if (remove > 0) {
+      for (const traceSegment of this.traceSegments_) {
+        const segmentData = traceSegment[0];
+        const geometry = segmentData.geometry;
+        const index = traceSegment[1];
+        let removeIndex = traceSegment[0].index + 1;
+        if (index === 1) {
+          removeIndex -= remove;
+        }
+        const coordinates = geometry.getCoordinates();
+        const coordinatesArray = getCoordinatesArray(
+          coordinates,
+          geometry.getType(),
+          segmentData.depth,
+        );
+        coordinatesArray.splice(removeIndex, remove);
+        this.setGeometryCoordinates_(geometry, coordinates);
+        this.shiftTracedSegmentIndices_(
+          segmentData,
+          removeIndex + remove,
+          -remove,
+        );
+        if (index === 1) {
+          segmentData.index -= remove;
+        }
+      }
+    }
+  }
+
+  /**
+   * @param {import('./tracing.js').TraceTarget} target The trace target.
+   * @param {number} fromIndex The start index.
+   * @param {number} toIndex The end index.
+   * @private
+   */
+  addTracedCoordinates_(target, fromIndex, toIndex) {
+    if (fromIndex === toIndex) {
+      return;
+    }
+
+    const newCoordinates = [];
+    if (fromIndex < toIndex) {
+      // forward trace
+      const start = Math.ceil(fromIndex);
+      let end = Math.floor(toIndex);
+      if (end === toIndex) {
+        // if end is snapped to a vertex, it will be added later
+        end -= 1;
+      }
+      for (let i = start; i <= end; ++i) {
+        newCoordinates.push((0,_tracing_js__WEBPACK_IMPORTED_MODULE_19__.getCoordinate)(target.coordinates, i));
+      }
+    } else {
+      // reverse trace
+      const start = Math.floor(fromIndex);
+      let end = Math.ceil(toIndex);
+      if (end === toIndex) {
+        end += 1;
+      }
+      for (let i = start; i >= end; --i) {
+        newCoordinates.push((0,_tracing_js__WEBPACK_IMPORTED_MODULE_19__.getCoordinate)(target.coordinates, i));
+      }
+    }
+
+    if (newCoordinates.length) {
+      for (const traceSegment of this.traceSegments_) {
+        const segmentData = traceSegment[0];
+        const geometry = segmentData.geometry;
+        const index = traceSegment[1];
+        const insertIndex = segmentData.index + 1;
+        if (index === 0) {
+          newCoordinates.reverse();
+        }
+        const coordinates = geometry.getCoordinates();
+        const coordinatesArray = getCoordinatesArray(
+          coordinates,
+          geometry.getType(),
+          segmentData.depth,
+        );
+        coordinatesArray.splice(insertIndex, 0, ...newCoordinates);
+        this.setGeometryCoordinates_(geometry, coordinates);
+        this.shiftTracedSegmentIndices_(
+          segmentData,
+          insertIndex,
+          newCoordinates.length,
+        );
+        if (index === 1) {
+          segmentData.index += newCoordinates.length;
+        }
+      }
+    }
+  }
+
+  /**
+   * @param {import('../coordinate.js').Coordinate} vertex Vertex.
+   * @param {DragSegment} dragSegment Drag segment.
+   */
+  updateGeometry_(vertex, dragSegment) {
+    const segmentData = dragSegment[0];
+    const depth = segmentData.depth;
+    let coordinates;
+    const segment = segmentData.segment;
+    const geometry = segmentData.geometry;
+    const index = dragSegment[1];
+
+    const stride = geometry.getStride();
+    for (let i = 2; i < stride; ++i) {
+      vertex[i] = segment[index][i];
+    }
+    vertex.length = stride;
+    switch (geometry.getType()) {
+      case 'Point':
+        coordinates = vertex;
+        segment[0] = vertex;
+        segment[1] = vertex;
+        break;
+      case 'MultiPoint':
+        coordinates = geometry.getCoordinates();
+        coordinates[segmentData.index] = vertex;
+        segment[0] = vertex;
+        segment[1] = vertex;
+        break;
+      case 'LineString':
+        coordinates = geometry.getCoordinates();
+        coordinates[segmentData.index + index] = vertex;
+        segment[index] = vertex;
+        break;
+      case 'MultiLineString':
+        coordinates = geometry.getCoordinates();
+        coordinates[depth[0]][segmentData.index + index] = vertex;
+        segment[index] = vertex;
+        break;
+      case 'Polygon': {
+        coordinates = geometry.getCoordinates();
+        const ring = coordinates[depth[0]];
+        const targetIndex = segmentData.index + index;
+
+        // Prevent duplicate change events when vertex already at position
+        if (
+          ring[targetIndex][0] === vertex[0] &&
+          ring[targetIndex][1] === vertex[1]
+        ) {
+          coordinates = null;
+        } else {
+          ring[targetIndex] = vertex;
+          if (targetIndex === 0) {
+            ring[ring.length - 1] = vertex;
+          } else if (targetIndex === ring.length - 1) {
+            ring[0] = vertex;
+          }
+        }
+        segment[index] = vertex;
+        break;
+      }
+      case 'MultiPolygon': {
+        coordinates = geometry.getCoordinates();
+        const mRing = coordinates[depth[1]][depth[0]];
+        const mTargetIndex = segmentData.index + index;
+
+        // Prevent duplicate change events when vertex already at position
+        if (
+          mRing[mTargetIndex][0] === vertex[0] &&
+          mRing[mTargetIndex][1] === vertex[1]
+        ) {
+          coordinates = null;
+        } else {
+          mRing[mTargetIndex] = vertex;
+          if (mTargetIndex === 0) {
+            mRing[mRing.length - 1] = vertex;
+          } else if (mTargetIndex === mRing.length - 1) {
+            mRing[0] = vertex;
+          }
+        }
+        segment[index] = vertex;
+        break;
+      }
+      case 'Circle':
+        const circle = /** @type {import("../geom/Circle.js").default} */ (
+          geometry
+        );
+        segment[0] = vertex;
+        segment[1] = vertex;
+        if (segmentData.index === CIRCLE_CENTER_INDEX) {
+          this.changingFeature_ = true;
+          circle.setCenter(vertex);
+          this.changingFeature_ = false;
+        } else {
+          // We're dragging the circle's circumference:
+          this.changingFeature_ = true;
+          const projection = this.getMap().getView().getProjection();
+          let radius = (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_7__.distance)(
+            (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.fromUserCoordinate)(circle.getCenter(), projection),
+            (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.fromUserCoordinate)(vertex, projection),
+          );
+          const userProjection = (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.getUserProjection)();
+          if (userProjection) {
+            const circleGeometry = circle
+              .clone()
+              .transform(userProjection, projection);
+            circleGeometry.setRadius(radius);
+            radius = circleGeometry
+              .transform(projection, userProjection)
+              .getRadius();
+          }
+          circle.setRadius(radius);
+          this.changingFeature_ = false;
+        }
+        break;
+      default:
+      // pass
+    }
+    if (coordinates) {
+      this.setGeometryCoordinates_(geometry, coordinates);
+    }
+  }
+
   /**
    * Handle pointer drag events.
    * @param {import("../MapBrowserEvent.js").default} evt Event.
@@ -1004,6 +1699,34 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
     ];
     const features = [];
     const geometries = [];
+    const startTraceCoord =
+      this.traceState_.active && !this.traceSegments_
+        ? this.traceState_.startCoord
+        : null;
+    if (startTraceCoord) {
+      this.traceSegments_ = [];
+      for (const dragSegment of this.dragSegments_) {
+        const segmentData = dragSegment[0];
+        const eligibleForTracing =
+          (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_7__.distance)(
+            (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_7__.closestOnSegment)(startTraceCoord, segmentData.segment),
+            startTraceCoord,
+          ) /
+            evt.map.getView().getResolution() <
+          1;
+        if (eligibleForTracing) {
+          this.traceSegments_.push(dragSegment);
+        }
+      }
+      if (this.traceSegments_.length > 1) {
+        // Both segments of the dragged vertex are anchored at the trace start,
+        // i.e. the grabbed vertex is the anchor itself.  Tracing needs a fixed
+        // anchor distinct from the moving vertex, so cancel tracing and let this
+        // drag move the vertex freely.
+        this.deactivateTrace_();
+        this.traceSegments_ = null;
+      }
+    }
     for (let i = 0, ii = this.dragSegments_.length; i < ii; ++i) {
       const dragSegment = this.dragSegments_[i];
       const segmentData = dragSegment[0];
@@ -1015,88 +1738,18 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
       if (!geometries.includes(geometry)) {
         geometries.push(geometry);
       }
-      const depth = segmentData.depth;
-      let coordinates;
-      const segment = segmentData.segment;
-      const index = dragSegment[1];
 
-      while (vertex.length < geometry.getStride()) {
-        vertex.push(segment[index][vertex.length]);
-      }
-
-      switch (geometry.getType()) {
-        case 'Point':
-          coordinates = vertex;
-          segment[0] = vertex;
-          segment[1] = vertex;
-          break;
-        case 'MultiPoint':
-          coordinates = geometry.getCoordinates();
-          coordinates[segmentData.index] = vertex;
-          segment[0] = vertex;
-          segment[1] = vertex;
-          break;
-        case 'LineString':
-          coordinates = geometry.getCoordinates();
-          coordinates[segmentData.index + index] = vertex;
-          segment[index] = vertex;
-          break;
-        case 'MultiLineString':
-          coordinates = geometry.getCoordinates();
-          coordinates[depth[0]][segmentData.index + index] = vertex;
-          segment[index] = vertex;
-          break;
-        case 'Polygon':
-          coordinates = geometry.getCoordinates();
-          coordinates[depth[0]][segmentData.index + index] = vertex;
-          segment[index] = vertex;
-          break;
-        case 'MultiPolygon':
-          coordinates = geometry.getCoordinates();
-          coordinates[depth[1]][depth[0]][segmentData.index + index] = vertex;
-          segment[index] = vertex;
-          break;
-        case 'Circle':
-          const circle = /** @type {import("../geom/Circle.js").default} */ (
-            geometry
-          );
-          segment[0] = vertex;
-          segment[1] = vertex;
-          if (segmentData.index === CIRCLE_CENTER_INDEX) {
-            this.changingFeature_ = true;
-            circle.setCenter(vertex);
-            this.changingFeature_ = false;
-          } else {
-            // We're dragging the circle's circumference:
-            this.changingFeature_ = true;
-            const projection = evt.map.getView().getProjection();
-            let radius = (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.distance)(
-              (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.fromUserCoordinate)(circle.getCenter(), projection),
-              (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.fromUserCoordinate)(vertex, projection),
-            );
-            const userProjection = (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.getUserProjection)();
-            if (userProjection) {
-              const circleGeometry = circle
-                .clone()
-                .transform(userProjection, projection);
-              circleGeometry.setRadius(radius);
-              radius = circleGeometry
-                .transform(projection, userProjection)
-                .getRadius();
-            }
-            circle.setRadius(radius);
-            this.changingFeature_ = false;
-          }
-          break;
-        default:
-        // pass
-      }
-
-      if (coordinates) {
-        this.setGeometryCoordinates_(geometry, coordinates);
-      }
+      this.updateGeometry_(vertex, dragSegment);
     }
-    this.createOrUpdateVertexFeature_(vertex, features, geometries, true);
+    // when tracing snaps the dragged vertex onto a target edge, show the vertex
+    // marker at the snapped location rather than at the raw pointer
+    const snappedVertex = this.updateTrace_(evt);
+    this.createOrUpdateVertexFeature_(
+      snappedVertex || vertex,
+      features,
+      geometries,
+      true,
+    );
   }
 
   /**
@@ -1135,8 +1788,17 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
    * @override
    */
   handleUpEvent(evt) {
+    // Tracing inserts and removes vertices with guarded geometry mutations (so
+    // that dragSegments_ survive the drag). Those guarded mutations skip the
+    // segment rBush rebuild that handleFeatureChange_ would normally do, so the
+    // rBush no longer matches the traced geometry. Collect the affected features
+    // here and rebuild their segment data once the drag is over.
+    const tracedFeatures = this.traceState_.active ? new Set() : null;
     for (let i = this.dragSegments_.length - 1; i >= 0; --i) {
       const segmentData = this.dragSegments_[i][0];
+      if (tracedFeatures) {
+        tracedFeatures.add(segmentData.feature);
+      }
       const geometry = segmentData.geometry;
       if (geometry.getType() === 'Circle') {
         const circle = /** @type {import("../geom/Circle.js").default} */ (
@@ -1150,7 +1812,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
         centerSegmentData.segment[1] = coordinates;
         circumferenceSegmentData.segment[0] = coordinates;
         circumferenceSegmentData.segment[1] = coordinates;
-        this.rBush_.update((0,_extent_js__WEBPACK_IMPORTED_MODULE_11__.createOrUpdateFromCoordinate)(coordinates), centerSegmentData);
+        this.rBush_.update((0,_extent_js__WEBPACK_IMPORTED_MODULE_13__.createOrUpdateFromCoordinate)(coordinates), centerSegmentData);
         /** @type {import("../geom/Circle.js").default | import("../geom/Polygon.js").default} */
         let circleGeometry = circle;
         const userProjection = (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.getUserProjection)();
@@ -1159,7 +1821,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
           circleGeometry = circleGeometry
             .clone()
             .transform(userProjection, projection);
-          circleGeometry = (0,_geom_Polygon_js__WEBPACK_IMPORTED_MODULE_12__.fromCircle)(circleGeometry).transform(
+          circleGeometry = (0,_geom_Polygon_js__WEBPACK_IMPORTED_MODULE_14__.fromCircle)(circleGeometry).transform(
             projection,
             userProjection,
           );
@@ -1169,10 +1831,19 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
           circumferenceSegmentData,
         );
       } else {
-        this.rBush_.update((0,_extent_js__WEBPACK_IMPORTED_MODULE_11__.boundingExtent)(segmentData.segment), segmentData);
+        this.rBush_.update((0,_extent_js__WEBPACK_IMPORTED_MODULE_13__.boundingExtent)(segmentData.segment), segmentData);
+      }
+    }
+    if (tracedFeatures) {
+      for (const feature of tracedFeatures) {
+        this.removeFeature_(feature);
+        if (this.filter_(feature)) {
+          this.addFeature_(feature);
+        }
       }
     }
     if (this.featuresBeingModified_) {
+      this.toggleTraceState_(evt);
       this.dispatchEvent(
         new ModifyEvent(
           ModifyEventType.MODIFYEND,
@@ -1190,8 +1861,8 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
    * @private
    */
   handlePointerMove_(evt) {
-    this.lastPixel_ = evt.pixel;
-    this.handlePointerAtPixel_(evt.coordinate);
+    this.lastCoordinate_ = evt.coordinate;
+    this.handlePointerAtPixel_(this.lastCoordinate_);
   }
 
   /**
@@ -1222,7 +1893,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
         pixel,
         (feature, layer, geometry) => {
           if (geometry && geometry.getType() === 'Point') {
-            geometry = new _geom_Point_js__WEBPACK_IMPORTED_MODULE_14__["default"](
+            geometry = new _geom_Point_js__WEBPACK_IMPORTED_MODULE_16__["default"](
               (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.toUserCoordinate)(geometry.getCoordinates(), projection),
             );
           }
@@ -1231,8 +1902,8 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
           if (
             geom &&
             geom.getType() === 'Point' &&
-            feature instanceof _Feature_js__WEBPACK_IMPORTED_MODULE_13__["default"] &&
-            this.features_.getArray().includes(feature)
+            feature instanceof _Feature_js__WEBPACK_IMPORTED_MODULE_15__["default"] &&
+            this.features_.includes(feature)
           ) {
             hitPointGeometry = /** @type {Point} */ (geom);
             const coordinate = /** @type {Point} */ (feature.getGeometry())
@@ -1253,12 +1924,12 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
     }
     if (!nodes) {
       const viewExtent = (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.fromUserExtent)(
-        (0,_extent_js__WEBPACK_IMPORTED_MODULE_11__.createOrUpdateFromCoordinate)(pixelCoordinate, tempExtent),
+        (0,_extent_js__WEBPACK_IMPORTED_MODULE_13__.createOrUpdateFromCoordinate)(pixelCoordinate, tempExtent),
         projection,
       );
       const buffer = map.getView().getResolution() * this.pixelTolerance_;
       const box = (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.toUserExtent)(
-        (0,_extent_js__WEBPACK_IMPORTED_MODULE_11__.buffer)(viewExtent, buffer, tempExtent),
+        (0,_extent_js__WEBPACK_IMPORTED_MODULE_13__.buffer)(viewExtent, buffer, tempExtent),
         projection,
       );
       nodes = this.rBush_.getInExtent(box);
@@ -1269,11 +1940,11 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
       const closestSegment = node.segment;
       let vertex = closestOnSegmentData(pixelCoordinate, node, projection);
       const vertexPixel = map.getPixelFromCoordinate(vertex);
-      let dist = (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.distance)(pixel, vertexPixel);
+      let dist = (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_7__.distance)(pixel, vertexPixel);
       if (hitPointGeometry || dist <= this.pixelTolerance_) {
         /** @type {Object<string, boolean>} */
         const vertexSegments = {};
-        vertexSegments[(0,_util_js__WEBPACK_IMPORTED_MODULE_16__.getUid)(closestSegment)] = true;
+        vertexSegments[(0,_util_js__WEBPACK_IMPORTED_MODULE_18__.getUid)(closestSegment)] = true;
 
         if (!this.snapToPointer_) {
           this.delta_[0] = vertex[0] - pixelCoordinate[0];
@@ -1293,8 +1964,8 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
         } else {
           const pixel1 = map.getPixelFromCoordinate(closestSegment[0]);
           const pixel2 = map.getPixelFromCoordinate(closestSegment[1]);
-          const squaredDist1 = (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.squaredDistance)(vertexPixel, pixel1);
-          const squaredDist2 = (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.squaredDistance)(vertexPixel, pixel2);
+          const squaredDist1 = (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_7__.squaredDistance)(vertexPixel, pixel1);
+          const squaredDist2 = (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_7__.squaredDistance)(vertexPixel, pixel2);
           dist = Math.sqrt(Math.min(squaredDist1, squaredDist2));
           this.snappedToVertex_ = dist <= this.pixelTolerance_;
           // Stop and cleanup overlay vertex feature if a segment was hit and new vertex creation is not allowed by the insertVertexCondition
@@ -1321,19 +1992,19 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
             this.snappedToVertex_,
           );
           const geometries = {};
-          geometries[(0,_util_js__WEBPACK_IMPORTED_MODULE_16__.getUid)(node.geometry)] = true;
+          geometries[(0,_util_js__WEBPACK_IMPORTED_MODULE_18__.getUid)(node.geometry)] = true;
           for (let i = 1, ii = nodes.length; i < ii; ++i) {
             const segment = nodes[i].segment;
             if (
-              ((0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.equals)(closestSegment[0], segment[0]) &&
-                (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.equals)(closestSegment[1], segment[1])) ||
-              ((0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.equals)(closestSegment[0], segment[1]) &&
-                (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.equals)(closestSegment[1], segment[0]))
+              (this.coordinatesEqual_(closestSegment[0], segment[0]) &&
+                this.coordinatesEqual_(closestSegment[1], segment[1])) ||
+              (this.coordinatesEqual_(closestSegment[0], segment[1]) &&
+                this.coordinatesEqual_(closestSegment[1], segment[0]))
             ) {
-              const geometryUid = (0,_util_js__WEBPACK_IMPORTED_MODULE_16__.getUid)(nodes[i].geometry);
+              const geometryUid = (0,_util_js__WEBPACK_IMPORTED_MODULE_18__.getUid)(nodes[i].geometry);
               if (!(geometryUid in geometries)) {
                 geometries[geometryUid] = true;
-                vertexSegments[(0,_util_js__WEBPACK_IMPORTED_MODULE_16__.getUid)(segment)] = true;
+                vertexSegments[(0,_util_js__WEBPACK_IMPORTED_MODULE_18__.getUid)(segment)] = true;
               }
             } else {
               break;
@@ -1404,7 +2075,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
       index: index,
     };
 
-    rTree.insert((0,_extent_js__WEBPACK_IMPORTED_MODULE_11__.boundingExtent)(newSegmentData.segment), newSegmentData);
+    rTree.insert((0,_extent_js__WEBPACK_IMPORTED_MODULE_13__.boundingExtent)(newSegmentData.segment), newSegmentData);
     this.dragSegments_.push([newSegmentData, 1]);
 
     /** @type {SegmentData} */
@@ -1416,11 +2087,16 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
       index: index + 1,
     };
 
-    rTree.insert((0,_extent_js__WEBPACK_IMPORTED_MODULE_11__.boundingExtent)(newSegmentData2.segment), newSegmentData2);
+    rTree.insert((0,_extent_js__WEBPACK_IMPORTED_MODULE_13__.boundingExtent)(newSegmentData2.segment), newSegmentData2);
     this.dragSegments_.push([newSegmentData2, 0]);
     return true;
   }
 
+  /**
+   * @param {import("../coordinate.js").Coordinate} coordinate The coordinate.
+   * @return {import("../coordinate.js").Coordinate} The updated pointer coordinate.
+   * @private
+   */
   updatePointer_(coordinate) {
     if (coordinate) {
       this.findInsertVerticesAndUpdateDragSegments_(coordinate);
@@ -1465,11 +2141,11 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
       return false;
     }
     const coordinate = this.vertexFeature_.getGeometry().getCoordinates();
-    const segments = this.rBush_.getInExtent((0,_extent_js__WEBPACK_IMPORTED_MODULE_11__.boundingExtent)([coordinate]));
+    const segments = this.rBush_.getInExtent((0,_extent_js__WEBPACK_IMPORTED_MODULE_13__.boundingExtent)([coordinate]));
     return segments.some(
       ({segment}) =>
-        (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.equals)(segment[0], coordinate) ||
-        (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.equals)(segment[1], coordinate),
+        this.coordinatesEqual_(segment[0], coordinate) ||
+        this.coordinatesEqual_(segment[1], coordinate),
     );
   }
 
@@ -1491,7 +2167,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
     if (
       !this.lastPointerEvent_ ||
       (this.lastPointerEvent_ &&
-        this.lastPointerEvent_.type != _MapBrowserEventType_js__WEBPACK_IMPORTED_MODULE_15__["default"].POINTERDRAG)
+        this.lastPointerEvent_.type != _MapBrowserEventType_js__WEBPACK_IMPORTED_MODULE_17__["default"].POINTERDRAG)
     ) {
       const evt = this.lastPointerEvent_;
       this.willModifyFeatures_(
@@ -1529,7 +2205,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
     for (i = dragSegments.length - 1; i >= 0; --i) {
       dragSegment = dragSegments[i];
       segmentData = dragSegment[0];
-      uid = (0,_util_js__WEBPACK_IMPORTED_MODULE_16__.getUid)(segmentData.feature);
+      uid = (0,_util_js__WEBPACK_IMPORTED_MODULE_18__.getUid)(segmentData.feature);
       if (segmentData.depth) {
         // separate feature components
         uid += '-' + segmentData.depth.join('-');
@@ -1620,7 +2296,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
           };
 
           this.rBush_.insert(
-            (0,_extent_js__WEBPACK_IMPORTED_MODULE_11__.boundingExtent)(newSegmentData.segment),
+            (0,_extent_js__WEBPACK_IMPORTED_MODULE_13__.boundingExtent)(newSegmentData.segment),
             newSegmentData,
           );
         }
@@ -1657,12 +2333,12 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
       return false;
     }
     const coordinate = this.vertexFeature_.getGeometry().getCoordinates();
-    const segments = this.rBush_.getInExtent((0,_extent_js__WEBPACK_IMPORTED_MODULE_11__.boundingExtent)([coordinate]));
+    const segments = this.rBush_.getInExtent((0,_extent_js__WEBPACK_IMPORTED_MODULE_13__.boundingExtent)([coordinate]));
     return segments.some(
       ({segment}) =>
         !(
-          (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.equals)(segment[0], coordinate) ||
-          (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.equals)(segment[1], coordinate)
+          this.coordinatesEqual_(segment[0], coordinate) ||
+          this.coordinatesEqual_(segment[1], coordinate)
         ),
     );
   }
@@ -1716,7 +2392,7 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
           segmentDataMatch.geometry === geometry &&
           (depth === undefined ||
             segmentDataMatch.depth === undefined ||
-            (0,_array_js__WEBPACK_IMPORTED_MODULE_18__.equals)(segmentDataMatch.depth, depth)) &&
+            (0,_array_js__WEBPACK_IMPORTED_MODULE_20__.equals)(segmentDataMatch.depth, depth)) &&
           segmentDataMatch.index > index
         ) {
           segmentDataMatch.index += delta;
@@ -1724,6 +2400,60 @@ class Modify extends _Pointer_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
       },
     );
   }
+
+  /**
+   * @override
+   */
+  disposeInternal() {
+    super.disposeInternal();
+    if (this.featuresCollection_) {
+      this.featuresCollection_.removeEventListener(
+        _CollectionEventType_js__WEBPACK_IMPORTED_MODULE_8__["default"].ADD,
+        this.handleExternalCollectionAdd_,
+      );
+      this.featuresCollection_.removeEventListener(
+        _CollectionEventType_js__WEBPACK_IMPORTED_MODULE_8__["default"].REMOVE,
+        this.handleExternalCollectionRemove_,
+      );
+      //change and propertychange event handlers were placed on all features in the external
+      // collection, not just the ones that passed the filter.  Remove these too.
+      for (const feature of this.featuresCollection_.getArray()) {
+        feature.removeEventListener(
+          _events_EventType_js__WEBPACK_IMPORTED_MODULE_10__["default"].CHANGE,
+          this.handleFeatureChange_,
+        );
+        if (this.filterFunctionWasSupplied_) {
+          feature.removeEventListener(
+            _ObjectEventType_js__WEBPACK_IMPORTED_MODULE_11__["default"].PROPERTYCHANGE,
+            this.handleFeatureChange_,
+          );
+        }
+      }
+    } else if (this.source_) {
+      this.source_.removeEventListener(
+        _source_VectorEventType_js__WEBPACK_IMPORTED_MODULE_9__["default"].ADDFEATURE,
+        this.handleSourceAdd_,
+      );
+      this.source_.removeEventListener(
+        _source_VectorEventType_js__WEBPACK_IMPORTED_MODULE_9__["default"].REMOVEFEATURE,
+        this.handleSourceRemove_,
+      );
+      //change and propertychange event handlers were placed on all features in the source, not
+      // just the ones that passed the filter.  Remove these too.
+      for (const feature of this.source_.getFeatures()) {
+        feature.removeEventListener(
+          _events_EventType_js__WEBPACK_IMPORTED_MODULE_10__["default"].CHANGE,
+          this.handleFeatureChange_,
+        );
+        if (this.filterFunctionWasSupplied_) {
+          feature.removeEventListener(
+            _ObjectEventType_js__WEBPACK_IMPORTED_MODULE_11__["default"].PROPERTYCHANGE,
+            this.handleFeatureChange_,
+          );
+        }
+      }
+    }
+  }
 }
 
 /**
@@ -1764,7 +2494,7 @@ function projectedDistanceToSegmentDataSquared(
           .clone()
           .transform(userProjection, projection);
       }
-      const distanceToCenterSquared = (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.squaredDistance)(
+      const distanceToCenterSquared = (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_7__.squaredDistance)(
         circleGeometry.getCenter(),
         (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.fromUserCoordinate)(pointCoordinates, projection),
       );
@@ -1777,7 +2507,7 @@ function projectedDistanceToSegmentDataSquared(
   const coordinate = (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.fromUserCoordinate)(pointCoordinates, projection);
   tempSegment[0] = (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.fromUserCoordinate)(segmentData.segment[0], projection);
   tempSegment[1] = (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.fromUserCoordinate)(segmentData.segment[1], projection);
-  return (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.squaredDistanceToSegment)(coordinate, tempSegment);
+  return (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_7__.squaredDistanceToSegment)(coordinate, tempSegment);
 }
 
 /**
@@ -1817,7 +2547,7 @@ function closestOnSegmentData(pointCoordinates, segmentData, projection) {
   tempSegment[0] = (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.fromUserCoordinate)(segmentData.segment[0], projection);
   tempSegment[1] = (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.fromUserCoordinate)(segmentData.segment[1], projection);
   return (0,_proj_js__WEBPACK_IMPORTED_MODULE_0__.toUserCoordinate)(
-    (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_17__.closestOnSegment)(coordinate, tempSegment),
+    (0,_coordinate_js__WEBPACK_IMPORTED_MODULE_7__.closestOnSegment)(coordinate, tempSegment),
     projection,
   );
 }
@@ -1826,7 +2556,7 @@ function closestOnSegmentData(pointCoordinates, segmentData, projection) {
  * @return {import("../style/Style.js").StyleFunction} Styles.
  */
 function getDefaultStyleFunction() {
-  const style = (0,_style_Style_js__WEBPACK_IMPORTED_MODULE_19__.createEditingStyle)();
+  const style = (0,_style_Style_js__WEBPACK_IMPORTED_MODULE_21__.createEditingStyle)();
   return function (feature, resolution) {
     return style['Point'];
   };
@@ -1835,6 +2565,112 @@ function getDefaultStyleFunction() {
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Modify);
 
 
+/***/ }),
+
+/***/ "./node_modules/@vaadin/map/node_modules/ol/layer/Vector.js":
+/*!******************************************************************!*\
+  !*** ./node_modules/@vaadin/map/node_modules/ol/layer/Vector.js ***!
+  \******************************************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _renderer_canvas_VectorLayer_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../renderer/canvas/VectorLayer.js */ "./node_modules/@vaadin/map/node_modules/ol/renderer/canvas/VectorLayer.js");
+/* harmony import */ var _BaseVector_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseVector.js */ "./node_modules/@vaadin/map/node_modules/ol/layer/BaseVector.js");
+/**
+ * @module ol/layer/Vector
+ */
+
+
+
+/**
+ * @template {import("../source/Vector.js").default<FeatureType>} [VectorSourceType=import("../source/Vector.js").default<*>]
+ * @template {import('../Feature.js').FeatureLike} [FeatureType=import("./BaseVector.js").ExtractedFeatureType<VectorSourceType>]
+ * @typedef {Object} Options
+ * @property {string} [className='ol-layer'] A CSS class name to set to the layer element.
+ * @property {number} [opacity=1] Opacity (0, 1).
+ * @property {boolean} [visible=true] Visibility.
+ * @property {import("../extent.js").Extent} [extent] The bounding extent for layer rendering.  The layer will not be
+ * rendered outside of this extent.
+ * @property {number} [zIndex] The z-index for layer rendering.  At rendering time, the layers
+ * will be ordered, first by Z-index and then by position. When `undefined`, a `zIndex` of 0 is assumed
+ * for layers that are added to the map's `layers` collection, or `Infinity` when the layer's `setMap()`
+ * method was used.
+ * @property {number} [minResolution] The minimum resolution (inclusive) at which this layer will be
+ * visible.
+ * @property {number} [maxResolution] The maximum resolution (exclusive) below which this layer will
+ * be visible.
+ * @property {number} [minZoom] The minimum view zoom level (exclusive) above which this layer will be
+ * visible.
+ * @property {number} [maxZoom] The maximum view zoom level (inclusive) at which this layer will
+ * be visible.
+ * @property {import("../render.js").OrderFunction} [renderOrder] Render order. Function to be used when sorting
+ * features before rendering. By default features are drawn in the order that they are created. Use
+ * `null` to avoid the sort, but get an undefined draw order.
+ * @property {number} [renderBuffer=100] The buffer in pixels around the viewport extent used by the
+ * renderer when getting features from the vector source for the rendering or hit-detection.
+ * Recommended value: the size of the largest symbol, line width or label.
+ * @property {VectorSourceType} [source] Source.
+ * @property {import("../Map.js").default} [map] Sets the layer as overlay on a map. The map will not manage
+ * this layer in its layers collection, and the layer will be rendered on top. This is useful for
+ * temporary layers. The standard way to add a layer to a map and have it managed by the map is to
+ * use [map.addLayer()]{@link import("../Map.js").default#addLayer}.
+ * @property {boolean|string|number} [declutter=false] Declutter images and text. Any truthy value will enable
+ * decluttering. Within a layer, a feature rendered before another has higher priority. All layers with the
+ * same `declutter` value will be decluttered together. The priority is determined by the drawing order of the
+ * layers with the same `declutter` value. Higher in the layer stack means higher priority. To declutter distinct
+ * layers or groups of layers separately, use different truthy values for `declutter`.
+ * @property {import("../style/Style.js").StyleLike|import("../style/flat.js").FlatStyleLike|null} [style] Layer style. When set to `null`, only
+ * features that have their own style will be rendered. See {@link module:ol/style/Style~Style} for the default style
+ * which will be used if this is not set.
+ * @property {import("./Base.js").BackgroundColor} [background] Background color for the layer. If not specified, no background
+ * will be rendered.
+ * @property {boolean} [updateWhileAnimating=false] When set to `true`, feature batches will
+ * be recreated during animations. This means that no vectors will be shown clipped, but the
+ * setting will have a performance impact for large amounts of vector data. When set to `false`,
+ * batches will be recreated when no animation is active.
+ * @property {boolean} [updateWhileInteracting=false] When set to `true`, feature batches will
+ * be recreated during interactions. See also `updateWhileAnimating`.
+ * @property {Object<string, *>} [properties] Arbitrary observable properties. Can be accessed with `#get()` and `#set()`.
+ */
+
+/**
+ * @classdesc
+ * Vector data is rendered client-side, as vectors. This layer type provides most accurate rendering
+ * even during animations. Points and labels stay upright on rotated views. For very large
+ * amounts of vector data, performance may suffer during pan and zoom animations. In this case,
+ * try {@link module:ol/layer/VectorImage~VectorImageLayer}.
+ *
+ * Note that any property set in the options is set as a {@link module:ol/Object~BaseObject}
+ * property on the layer object; for example, setting `title: 'My Title'` in the
+ * options means that `title` is observable, and has get/set accessors.
+ *
+ * @template {import("../source/Vector.js").default<FeatureType>} [VectorSourceType=import("../source/Vector.js").default<*>]
+ * @template {import('../Feature.js').FeatureLike} [FeatureType=import("./BaseVector.js").ExtractedFeatureType<VectorSourceType>]
+ * @extends {BaseVectorLayer<FeatureType, VectorSourceType, CanvasVectorLayerRenderer>}
+ * @api
+ */
+class VectorLayer extends _BaseVector_js__WEBPACK_IMPORTED_MODULE_0__["default"] {
+  /**
+   * @param {Options<VectorSourceType, FeatureType>} [options] Options.
+   */
+  constructor(options) {
+    super(options);
+  }
+
+  /**
+   * @override
+   */
+  createRenderer() {
+    return new _renderer_canvas_VectorLayer_js__WEBPACK_IMPORTED_MODULE_1__["default"](this);
+  }
+}
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (VectorLayer);
+
+
 /***/ })
 
 }])