Flesh out the web editor, remove drag-and-drop

[dabreegster]

https://user-images.githubusercontent.com/1664407/199611654-8e9d39aa-a323-4a4e-b285-5abaf9fb0d82.mp4

Remove drag-and-drop for now, since it complicates the code, we were using a library I'm not sure is the right choice, and the UX of dragging a trash can to a lane vs a lane to a trash can is a bit unclear to me. Instead, just have some buttons inline to each card, and add new lanes to the end always.

[github-actions[bot]]

Benchmark for bf8158e

Click to view benchmark

| Test | Base | PR | % | |------|--------------|------------------|---| | tests/224637155 | 5.5±0.02µs | **5.4±0.00µs** | **-1.82%** | | tests/380103730 Japanese Expressway | 7.1±0.09µs | 7.1±0.03µs | 0.00% | | tests/389654080 | 9.0±0.01µs | **8.9±0.01µs** | **-1.11%** | | tests/49207928 cycleway:BACKWARD=lane | 6.6±0.02µs | 6.6±0.01µs | 0.00% | | tests/8591383 a bidirectional cycleway, oneway:bicycle | 7.5±0.02µs | **7.4±0.01µs** | **-1.33%** | | tests/bus:lanes=designated\| | 6.8±0.02µs | 6.8±0.03µs | 0.00% | | tests/busway=lane | 6.3±0.01µs | **6.2±0.00µs** | **-1.59%** | | tests/cycleway=lane | 6.4±0.01µs | **6.3±0.07µs** | **-1.56%** | | tests/cycleway=opposite oneway=yes oneway:bicycle=no | 6.0±0.17µs | 6.0±0.01µs | 0.00% | | tests/cycleway=opposite_track oneway=yes, deprecated | 7.0±0.01µs | 7.0±0.01µs | 0.00% | | tests/sidewalk:right=yes | 5.6±0.02µs | 5.6±0.01µs | 0.00% | | tests/sidewalk=both | 5.8±0.02µs | 5.8±0.01µs | 0.00% |

[Robinlovelace]

This looks as easy to user as streetmix.net, if not more so. And it's simpler which is good (and more relevant to OSM). Transport focused OSM editing functionality here we come?

[michaelkirk]

Sorry I haven't been following development here that closely, so feel free to ignore me if I'm off base.

I felt pretty good about the UI we iterated on for the abstreet lane editor, where you could drag-and-drop lanes to re-order them, but deleting was a click-button action.

Maybe that's a reasonable route to work towards for this web implementation:

https://user-images.githubusercontent.com/217057/199624454-1bbce7b6-11fb-4e80-a514-94d3d26575a6.mp4

[dabreegster]

I felt pretty good about the UI we iterated on for the abstreet lane editor, where you could drag-and-drop lanes to re-order them, but deleting was a click-button action.

Good feedback, thanks! I think the A/B Street behavior is what we want to build towards here. This JS editor died off for a few months, and I want to get the ball rolling again by attempting https://github.com/a-b-street/osm2lanes/issues/240#issuecomment-1288582528. Drag-and-drop will come back, but maybe not with sortable.js. And having a separate button for deletion (instead of dragging a lane <-> a trash can) sounds like simpler UX too.

[dabreegster]

PTAL, I switched over to always building up DOM elements, and using buttons.

[github-actions[bot]]

Benchmark for a1f16c4

Click to view benchmark

| Test | Base | PR | % | |------|--------------|------------------|---| | tests/224637155 | 6.7±0.35µs | 6.6±0.33µs | -1.49% | | tests/380103730 Japanese Expressway | 8.6±0.50µs | 8.9±0.44µs | +3.49% | | tests/389654080 | 11.1±0.39µs | 10.8±0.62µs | -2.70% | | tests/49207928 cycleway:BACKWARD=lane | 8.2±0.43µs | 8.0±0.48µs | -2.44% | | tests/8591383 a bidirectional cycleway, oneway:bicycle | 9.3±0.59µs | 9.1±0.39µs | -2.15% | | tests/bus:lanes=designated\| | 8.6±0.62µs | 8.4±0.43µs | -2.33% | | tests/busway=lane | 7.6±0.34µs | 7.6±0.37µs | 0.00% | | tests/cycleway=lane | 7.8±0.37µs | 7.7±0.40µs | -1.28% | | tests/cycleway=opposite oneway=yes oneway:bicycle=no | 7.5±0.35µs | 7.5±0.33µs | 0.00% | | tests/cycleway=opposite_track oneway=yes, deprecated | 8.7±0.46µs | 8.8±0.49µs | +1.15% | | tests/sidewalk:right=yes | 6.9±0.38µs | 7.0±0.41µs | +1.45% | | tests/sidewalk=both | 7.0±0.32µs | 7.2±0.30µs | +2.86% |

[github-actions[bot]]

Benchmark for 36b719a

Click to view benchmark

| Test | Base | PR | % | |------|--------------|------------------|---| | tests/224637155 | 5.4±0.00µs | 5.4±0.08µs | 0.00% | | tests/380103730 Japanese Expressway | 7.3±0.07µs | 7.3±0.06µs | 0.00% | | tests/389654080 | 8.8±0.01µs | 8.8±0.02µs | 0.00% | | tests/49207928 cycleway:BACKWARD=lane | 6.6±0.01µs | 6.6±0.01µs | 0.00% | | tests/8591383 a bidirectional cycleway, oneway:bicycle | 7.4±0.01µs | 7.4±0.01µs | 0.00% | | tests/bus:lanes=designated\| | **6.7±0.00µs** | 6.8±0.01µs | **+1.49%** | | tests/busway=lane | 6.1±0.06µs | 6.1±0.02µs | 0.00% | | tests/cycleway=lane | 6.3±0.02µs | 6.3±0.00µs | 0.00% | | tests/cycleway=opposite oneway=yes oneway:bicycle=no | 5.9±0.01µs | 5.9±0.00µs | 0.00% | | tests/cycleway=opposite_track oneway=yes, deprecated | 6.9±0.01µs | 6.9±0.01µs | 0.00% | | tests/sidewalk:right=yes | 5.5±0.00µs | 5.5±0.01µs | 0.00% | | tests/sidewalk=both | **5.7±0.02µs** | 5.8±0.02µs | **+1.75%** |