Pass along mode to BrushEvent

[woutervh-]

Hello.

In my project I need to know the mode of the brush in the event handler.
This is because depending on which axis (x/y) the user is resizing the selection in, or whether the user is moving the selection without resizing (dragging), I need to change my logic on the snapping/clipping of the brush selection.

In this PR is my attempt at including the mode in BrushEvent.
I've tested it in my local project and it works fine.
Not sure if this is how you would solve it, so feel free to edit it.

[Fil]

We are almost ready to release d3-brush@2 with a modified API, so you will probably have to rebase it on #71 (or wait a few days for it to be merged).

Can you share a (real world) example of how this is useful?

[woutervh-]

Hi @Fil ,

Sure, here is our real world scenario:

We allow our users to draw 2D boxes in the plot, to indicate areas of interest.
We have a requirement that these boxes cannot overlap.
After the brush event happens, we want to .move the selection so that we can ensure the selection does not overlap with existing boxes.

For example: if the user is using the "north" handle to vertically expand the selection, and at some point reaches an existing box, then we ensure that the "north" handle does not move past the border of the existing box.

The way that the selection needs to be .move'ed depends heavily on the mode of the brush.
This is because it's OK to alter the "north" position of the selection when the user is attempting to move only the north handle, but when the user is dragging the entire selection, it would not be good to only alter the "north" position. Instead, the size of the box needs to be conserved and the center needs to be constrained so that the edges don't cause any overlap.

Hope this makes sense, and explains why we need information about the mode.

[woutervh-]

I've created this notebook to illustrate the problem:
https://observablehq.com/@woutervh-/brush-with-collision

[mbostock]

Looks good. Would benefit from updating the README to mention the new mode field.

[Fil]

v2 is now in master. It emits a specific brushEvent on each event.

That event is structured like so:

{
  type: "brush", // or "start", "end"…
  sourceEvent: MouseEvent {…},
  target: …,
  selection: [[x0, y0], [x1, y1]]
}

I think that this is where we would now add mode: mode.name?

[woutervh-]

Thanks @Fil

• Added mode to README
• Resolved merge conflicts from branch two

[Fil]

Works well 👍

[woutervh-]

Good catch in the review, how did I miss this?? enenumerable: true
All suggestions applied.

[woutervh-]

FYI: here's my attempt at a solution to stop the brush from intersecting other rectangles, using the newly added functionality.

Some improvements can be made, but I will need more information from the brush's state to achieve it.
Maybe in a future issue/PR I will address these issues, but for now this is good enough for me:

https://observablehq.com/@woutervh-/brush-with-collision-solution-continued