When clicking an inactive feature in direct_select, select it

With this, you don't have to click twice to select another feature when
you are in direct_select.

The mode will still be changed to simple_select. So if you want to
activate direct_select for another feature, you have to click it twice,
but that's still one less click than before.

src/modes/direct_select.js

@@ -98,8 +98,9 @@ DirectSelect.clickNoTarget = function () {
   this.changeMode(Constants.modes.SIMPLE_SELECT);
 };
 
-DirectSelect.clickInactive = function () {
-  this.changeMode(Constants.modes.SIMPLE_SELECT);
+DirectSelect.clickInactive = function (state, e) {
+  const featureId = e.featureTarget.properties.id;
+  this.changeMode(Constants.modes.SIMPLE_SELECT, { featureIds: [featureId] });
 };
 
 DirectSelect.clickActiveFeature = function (state) {
@@ -181,11 +182,11 @@ DirectSelect.onTrash = function(state) {
 
 DirectSelect.onMouseMove = function(state, e) {
   // On mousemove that is not a drag, stop vertex movement.
-  const isFeature = isActiveFeature(e);
   const onVertex = isVertex(e);
   const noCoords = state.selectedCoordPaths.length === 0;
-  if (isFeature && noCoords) this.updateUIClasses({ mouse: Constants.cursors.MOVE });
+  if (isActiveFeature(e) && noCoords) this.updateUIClasses({ mouse: Constants.cursors.MOVE });
   else if (onVertex && !noCoords) this.updateUIClasses({ mouse: Constants.cursors.MOVE });
+  else if (isInactiveFeature(e)) this.updateUIClasses({ mouse: Constants.cursors.POINTER });
   else this.updateUIClasses({ mouse: Constants.cursors.NONE });
   this.stopDragging(state);
 

test/direct_select.test.js

@@ -273,6 +273,25 @@ test('direct_select', (t) => {
     });
   });
 
+  t.test('direct_select - clicking an inactive feature should select it', (st) => {
+    const [lineId] = Draw.add(getGeoJSON('line'));
+    const [polygonId] = Draw.add(getGeoJSON('polygon'));
+    Draw.changeMode(Constants.modes.DIRECT_SELECT, {
+      featureId: lineId
+    });
+    const clickAt = getGeoJSON('polygon').geometry.coordinates[0][0];
+    afterNextRender(() => {
+      click(map, makeMouseEvent(clickAt[0], clickAt[1]));
+      map.fire.resetHistory();
+      afterNextRender(() => {
+        const args = getFireArgs().filter(arg => arg[0] === 'draw.selectionchange');
+        t.equal(args.length, 1, 'should have one and only one selectionchange event');
+        t.equal(Draw.getSelectedIds().indexOf(polygonId) !== -1, true, 'polygon is now selected');
+        cleanUp(() => st.end());
+      });
+    });
+  });
+
   document.body.removeChild(mapContainer);
   t.end();
 });