ol 10.6.2-dev.1753992384159 → 10.6.2-dev.1754054564182

package/interaction/Modify.js

@@ -18,6 +18,7 @@ import EventType from '../events/EventType.js';
 import {
   altKeyOnly,
   always,
+  never,
   primaryAction,
   singleClick,
 } from '../events/condition.js';
@@ -42,6 +43,11 @@ import RBush from '../structs/RBush.js';
 import {createEditingStyle} from '../style/Style.js';
 import {getUid} from '../util.js';
 import PointerInteraction from './Pointer.js';
+import {
+  getCoordinate,
+  getTraceTargetUpdate,
+  getTraceTargets,
+} from './tracing.js';
 
 /**
  * The segment index assigned to a circle's center when
@@ -130,12 +136,36 @@ const ModifyEventType = {
  * @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 {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`.
  */
 
+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
@@ -270,10 +300,10 @@ class Modify extends PointerInteraction {
     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
@@ -344,15 +374,15 @@ class Modify extends PointerInteraction {
      * @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),
     };
 
     /**
@@ -361,6 +391,31 @@ class Modify extends PointerInteraction {
      */
     this.source_ = null;
 
+    /**
+     * @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").default}
      * @private
@@ -430,6 +485,24 @@ class Modify extends PointerInteraction {
         : options.snapToPointer;
   }
 
+  /**
+   * 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 = never;
+    } else if (trace === true) {
+      condition = always;
+    } else {
+      condition = trace;
+    }
+    this.traceCondition_ = condition;
+  }
+
   /**
    * @param {Feature} feature Feature.
    * @private
@@ -444,7 +517,7 @@ class Modify extends PointerInteraction {
     }
     const map = this.getMap();
     if (map && map.isRendered() && this.getActive()) {
-      this.handlePointerAtPixel_(map.getCoordinateFromPixel(this.lastPixel_));
+      this.handlePointerAtPixel_(this.lastCoordinate_);
     }
     feature.addEventListener(EventType.CHANGE, this.boundHandleFeatureChange_);
   }
@@ -878,6 +951,11 @@ class Modify extends PointerInteraction {
     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;
@@ -888,8 +966,9 @@ class Modify extends PointerInteraction {
     }
 
     const projection = this.getMap().getView().getProjection();
+    /** @type {Array<SegmentData>} */
     const insertVertices = [];
-    const vertex = vertexFeature.getGeometry().getCoordinates();
+    const vertex = this.vertexFeature_.getGeometry().getCoordinates();
     const vertexExtent = boundingExtent([vertex]);
     const segmentDataMatches = this.rBush_.getInExtent(vertexExtent);
     const componentSegments = {};
@@ -974,6 +1053,370 @@ class Modify extends PointerInteraction {
     return insertVertices;
   }
 
+  /**
+   * @private
+   */
+  deactivateTrace_() {
+    this.traceState_ = {active: false};
+  }
+
+  /**
+   * Update the trace.
+   * @param {import("../MapBrowserEvent.js").default} event Event.
+   * @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 (coordinateDistance(startPx, event.pixel) < this.pixelTolerance_) {
+        return;
+      }
+    }
+
+    const updatedTraceTarget = getTraceTargetUpdate(
+      event.coordinate,
+      traceState,
+      event.map,
+      this.pixelTolerance_,
+    );
+
+    if (
+      traceState.targetIndex === -1 &&
+      Math.sqrt(updatedTraceTarget.closestTargetDistance) /
+        event.map.getView().getResolution() >
+        this.pixelTolerance_
+    ) {
+      return;
+    }
+
+    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);
+      } else {
+        for (const traceSegment of this.traceSegments_) {
+          const segmentData = traceSegment[0];
+          const geometry = segmentData.geometry;
+          const index = traceSegment[1];
+          const coordinates = geometry.getCoordinates();
+          const coordinatesArray = getCoordinatesArray(
+            coordinates,
+            geometry.getType(),
+            segmentData.depth,
+          );
+          coordinatesArray.splice(segmentData.index + index, 1);
+          geometry.setCoordinates(coordinates);
+          if (index === 0) {
+            segmentData.index -= 1;
+          }
+        }
+      }
+      // 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;
+    const target = traceState.targets[traceState.targetIndex];
+    target.endIndex = updatedTraceTarget.endIndex;
+  }
+
+  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 = 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 = 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);
+    }
+  }
+
+  /**
+   * @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);
+        geometry.setCoordinates(coordinates);
+        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(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(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);
+        geometry.setCoordinates(coordinates);
+        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];
+
+    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 = this.getMap().getView().getProjection();
+          let radius = coordinateDistance(
+            fromUserCoordinate(circle.getCenter(), projection),
+            fromUserCoordinate(vertex, projection),
+          );
+          const userProjection = 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.
@@ -992,6 +1435,26 @@ class Modify extends PointerInteraction {
     ];
     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 =
+          coordinateDistance(
+            closestOnSegment(startTraceCoord, segmentData.segment),
+            startTraceCoord,
+          ) /
+            evt.map.getView().getResolution() <
+          1;
+        if (eligibleForTracing) {
+          this.traceSegments_.push(dragSegment);
+        }
+      }
+    }
     for (let i = 0, ii = this.dragSegments_.length; i < ii; ++i) {
       const dragSegment = this.dragSegments_[i];
       const segmentData = dragSegment[0];
@@ -1003,87 +1466,10 @@ class Modify extends PointerInteraction {
       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 = coordinateDistance(
-              fromUserCoordinate(circle.getCenter(), projection),
-              fromUserCoordinate(vertex, projection),
-            );
-            const userProjection = 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.updateTrace_(evt);
     this.createOrUpdateVertexFeature_(vertex, features, geometries, true);
   }
 
@@ -1161,6 +1547,7 @@ class Modify extends PointerInteraction {
       }
     }
     if (this.featuresBeingModified_) {
+      this.toggleTraceState_(evt);
       this.dispatchEvent(
         new ModifyEvent(
           ModifyEventType.MODIFYEND,
@@ -1178,8 +1565,8 @@ class Modify extends PointerInteraction {
    * @private
    */
   handlePointerMove_(evt) {
-    this.lastPixel_ = evt.pixel;
-    this.handlePointerAtPixel_(evt.coordinate);
+    this.lastCoordinate_ = evt.coordinate;
+    this.handlePointerAtPixel_(this.lastCoordinate_);
   }
 
   /**
@@ -1409,6 +1796,11 @@ class Modify extends PointerInteraction {
     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);