Support tracing with the draw interaction

test/browser/spec/ol/interaction/Draw.test.js

@@ -32,8 +32,21 @@ import {listen} from '../../../../../src/ol/events.js';
 import {register} from '../../../../../src/ol/proj/proj4.js';
 import {unByKey} from '../../../../../src/ol/Observable.js';
 
-describe('ol.interaction.Draw', function () {
-  let target, map, source;
+describe('ol/interaction/Draw', function () {
+  /**
+   * @type {VectorSource}
+   */
+  let source;
+
+  /**
+   * @type {Map}
+   */
+  let map;
+
+  /**
+   * @type {HTMLDivElement}
+   */
+  let target;
 
   const width = 360;
   const height = 180;
@@ -135,6 +148,78 @@ describe('ol.interaction.Draw', function () {
       expect(draw.freehandCondition_(event)).to.be(true);
     });
 
+    describe('trace option', function () {
+      it('always goes in trace mode if true', function () {
+        const draw = new Draw({
+          source: source,
+          type: 'LineString',
+          trace: true,
+        });
+
+        const event = new MapBrowserEvent({
+          map: map,
+          type: 'pointerup',
+          originalEvent: new PointerEvent('pointerup', {
+            clientX: 0,
+            clientY: 0,
+          }),
+        });
+
+        expect(draw.traceCondition_(event)).to.be(true);
+      });
+
+      it('never goes in trace mode if false', function () {
+        const draw = new Draw({
+          source: source,
+          type: 'LineString',
+          trace: false,
+        });
+
+        const event = new MapBrowserEvent(
+          map,
+          'pointerup',
+          new PointerEvent('pointerup', {
+            clientX: 0,
+            clientY: 0,
+          })
+        );
+
+        expect(draw.traceCondition_(event)).to.be(false);
+      });
+
+      it('accepts a condition', function () {
+        const draw = new Draw({
+          source: source,
+          type: 'LineString',
+          trace: shiftKeyOnly,
+        });
+
+        const goodEvent = new MapBrowserEvent(
+          map,
+          'pointerup',
+          new PointerEvent('pointerup', {
+            clientX: 0,
+            clientY: 0,
+            shiftKey: true,
+          })
+        );
+
+        expect(draw.traceCondition_(goodEvent)).to.be(true);
+
+        const badEvent = new MapBrowserEvent(
+          map,
+          'pointerup',
+          new PointerEvent('pointerup', {
+            clientX: 0,
+            clientY: 0,
+            shiftKey: false,
+          })
+        );
+
+        expect(draw.traceCondition_(badEvent)).to.be(false);
+      });
+    });
+
     it('accepts a dragVertexDelay option', function () {
       const draw = new Draw({
         source: source,
@@ -1012,6 +1097,84 @@ describe('ol.interaction.Draw', function () {
     });
   });
 
+  describe('tracing polygons', function () {
+    let draw;
+
+    beforeEach(function () {
+      draw = new Draw({
+        source: source,
+        type: 'Polygon',
+        trace: true,
+      });
+      map.addInteraction(draw);
+    });
+
+    it('starts tracing with first edge click, stops tracing with second edge click', function () {
+      source.addFeatures([
+        new Feature(
+          new Polygon([
+            [
+              [0, -50],
+              [100, -50],
+              [100, -100],
+              [0, -100],
+              [0, -50],
+            ],
+          ])
+        ),
+      ]);
+
+      // first click adds a point
+      simulateEvent('pointermove', 50, 0);
+      simulateEvent('pointerdown', 50, 0);
+      simulateEvent('pointerup', 50, 0);
+      expect(draw.traceState_.active).to.be(false);
+      draw.shouldHandle_ = false;
+
+      // second click activates tracing (center of bottom edge)
+      simulateEvent('pointermove', 50, 50);
+      simulateEvent('pointerdown', 50, 50);
+      simulateEvent('pointerup', 50, 50);
+      expect(draw.traceState_.active).to.be(true);
+      expect(draw.traceState_.targetIndex).to.be(-1);
+      draw.shouldHandle_ = false;
+
+      // move to pick a target
+      simulateEvent('pointermove', 75, 10);
+      expect(draw.traceState_.active).to.be(true);
+      expect(draw.traceState_.targetIndex).to.be(0);
+      draw.shouldHandle_ = false;
+
+      // third click ends tracing (right half of top edge)
+      simulateEvent('pointermove', 75, 100);
+      simulateEvent('pointerdown', 75, 100);
+      simulateEvent('pointerup', 75, 100);
+      expect(draw.traceState_.active).to.be(false);
+      draw.shouldHandle_ = false;
+
+      // finish on first point
+      simulateEvent('pointermove', 50, 0);
+      simulateEvent('pointerdown', 50, 0);
+      simulateEvent('pointerup', 50, 0);
+
+      const features = source.getFeatures();
+      expect(features).to.have.length(2);
+      const geometry = features[1].getGeometry();
+      expect(geometry).to.be.a(Polygon);
+
+      expect(geometry.getCoordinates()).to.eql([
+        [
+          [50, 0],
+          [50, -50],
+          [100, -50], // traced point
+          [100, -100], // traced point
+          [75, -100],
+          [50, 0],
+        ],
+      ]);
+    });
+  });
+
   describe('drawing multi-polygons', function () {
     let draw;