Rectangle-select Drawing Tool

[tgilcrest]

A user can select the rectangle-select drawing tool and use it to select geo-units to add to a district.

AC:

• A drawing model toggle exists to toggle between single-select and rectangle select (can't select both at the same time)
• The rectangle select changes the cursor to a cross-hairs cursor like in the screenshot
• To draw, click and release to start drawing a rectangle. Drag to expand the rectangle. Click again to complete the selection.
• Click, hold, and drag on the map to pan the map. This should work before or during selection.
• Geo-units get shaded as they are added to the selection
• The cursor popup displays [number of] [geo-units] selected, like in the screenshot, and the population of the selection is displayed

[jfrankl]

I used https://github.com/thegisdev/mapbox-gl-draw-rectangle-mode in the prototype to handle the rectangle drawing. If we were going to use a library like that, I'd actually prefer this variation, which has what I think is a more familiar rectangle drawing interaction https://github.com/CartoDB/mapboxgl-draw-rectangle-drag.

[tgilcrest]

When I wrote the issue, I described how the prototype tool behaves (click, release, drag, click to make a selection). Would changing the library change that interaction, e.g. click, drag while holding click, release to make a selection? And is that something we want to change?

I ask because the prototype behavior allowed someone to pan the map while they were making the selection. The user doesn't have to make a new selection if they want to pan the map. I thought this could be beneficial. But at the same time some of the testers were confused about how the tool worked because they were expecting click-drag-release.

I don't have a preference either way, just want to make sure the original comment has the right description.

[jfrankl]

Were multiple testers confused about the rectangle interaction? If so, I think that's a good reason to switch. What are your thoughts?

In the prototype, while using the paint brush tool, a user can hold down the space bar to pan. We should do this for the rectangle tool as well. We can do things to make this interaction more clear to new users.

[pcaisse]

FWIW I was just playing around with the prototype and was confused by the click-to-start-drawing interaction. I was expecting it to work as a click-and-drag and so I clicked and then dragged and ended up panning accidentally. It took me a little bit of experimentation to figure out how to use the rectangle selection tool at all.

[tgilcrest]

Looking back at the feedback, it's mixed:

• One tester I tested with in person struggled to figure it out, and even after explaining his muscle memory seemed to assume it should be click and drag. But he indicated it was just something he needed to get used to.
• Another tester said this: "Panning the map with left-click-and-drag works with pointer and rectangle, and feels right. But it doesn't work with brush. I don't know if there's a good fix to this.", which indicates he likes having the pan functionality in the rectangle.
• And personally my own experience echoes Peter's

But if I think about how to do panning without the current setup, I think a) not enough people will know/remember to use the space bar to pan and b) the alternative means they have to click a different control like a ✋ to grab and pan the map, and then click back to the rectangle which I don't like the idea of.

However, Tester 2 above also included this in another point of feedback that might provide a solution: 'When grouping blocks using rectangle draw tool, when I drag past edge of screen, I want underlying graph to scroll so that I can keep selecting more blocks."

So this is an interesting idea: Maybe we do the more intuitive click-drag-release control so when the user has the rectangle engaged and their cursor approaches the edge of the map canvas, the map pans that direction automatically until they move away from the edge of the canvas. (If you've ever played RTS games, this is reminiscent of the types of controls they use for their maps).

[pcaisse]

Maybe we do the more intuitive click-drag-release control so when the user has the rectangle engaged and their cursor approaches the edge of the map canvas, the map pans that direction automatically until they move away from the edge of the canvas

That seems like a good idea to me. Should we go with the click-drag-release interaction for now then?

[tgilcrest]

Yeah let's do that for now and we can modify later if needed.

[jfrankl]

Using click-drag-release as a starting point seems good. I think we can take measures to make the "hold space" interaction more discoverable than it is in the prototype.

In addition, here is a proof of concept of the RTS-style pan that @tgilcrest described. https://codepen.io/lknarf/full/bGEaWYN. I think it looks promising as an enhancement.

[tgilcrest]

I tried it out and I think that could work well!

One thing I noticed is that the map only pans if you are actively moving the mouse near the border, which means you need to sort of jiggle the mouse at the edge to keep it moving. I think it would work better if panned even when the mouse is sitting still. (I realize this is a POC, just wanted to mention it since I noticed it.)