Selectbox library facilites use of mouse/touch interaction -

This is a small library I built that uses react function components and custom hooks to provide information about cursor location, clicks. It also can set up SVG elements that can auto-scale contents, do zoom/pan, and create shapes based on selection area. If you use the histogram on one of my data maps to select data, that is selectBox in action. Population density map, for example.

The component passes all this information to its children -

The selectBox component passes all the information about mouse/touch status to its children for them to use as needed. It does the job of keeping track of it all but for the most part does not do anything with it.

Renders are triggered for most pointer actions

The listed variables mostly trigger re-renders because they are tracked with useState() hooks. The exception is x/y; it triggers too many renders to have any movement tracked by state.

Props passed by the selectbox to children for their use -

  1. ismousedown - indicates if the mouse is down.
  2. x - Pointer x location.
  3. y - Pointer y location.
  4. startx - Anytime onMouseDown/onTouchStart event occurs, sets x location.
  5. starty - When onMouseDown/onTouchStart event occurs, set y location.
  6. endx - when onMouseUp/onTouchEnd event occurs, set x location.
  7. endy - when mouseup/touchend occurs, set y location.
  8. clickx - when onClick event occurs, set x location.
  9. clicky - when onClick occurs, set y location.
  10. selectx - With pointer down/moving, tracks startx to current x distance.
  11. selecty - With pointer down/moving, tracks starty to current y distance.
  12. dragx - When pointer is down, tracks current x location.
  13. dragy - When pointer is down, tracks current y location.
  14. offx - when mouse is down, track selection area x offset.
  15. offy - When mouse is down, track selection area y offset.
  16. trackBounds - Tracks width, height of element, top/left offsets. Only has values when using <MouseRect> or when you set it manually.

SelectBase vs ViewBox -

Selectbase sets up a <div /> that passes all the tracking info. ViewBox (ZoomPan or Const) is specifically for setting up an SVG that will scale well. It can integrate easily with Selectbase for an interactive SVG.

Zoom and pan -

A useZoomPan custom hook allows a ViewBoxZoomPan to be set up pretty simply to zomm and pan svg.

Use cases

The components of the library can be combined in several ways to accomplish different tasks.

Just tracking pointer activity

Just need <SelectBase> in this case. Any component inside of it can then use the pointer info passed by SelectBase.

Just setting up an easily scalable SVG element

Use either <ViewBoxConst> or <ViewBoxZoomPan>. The way they work is to set the svg viewBox argument so that the contents do not change even if they change in size. This is true for both components, the ZoomPan version just adds the ability to do zoom/pan, but they are the same otherwise.

SVG with pointer interactivity

Use a <ViewBox> variant inside <SelectBase>. I set them up so that if the ViewBox is a direct child of SelectBase the prop passing is automatically done and you should have access to everything inside the svg. Demo using this setup for interactivity/animation

SVG with pointer info, zoom/pan capability

This combines most of the functionality available. All the pointer info is used to do some svg manipulation, and the zoom/pan is handled by the ViewBox and useZoomPan hook. This demo combines this functionality

Showing selected regions

This is the same setup as getting svg with pointer interaction, but I include components I set up that highlight the selected region. Demo the selection Rectangles

How the ViewBoxes behave in various circumstances

I created the viewbox component because svg can be challenging to work with with changing window sizes. I set it up to scale the svg to the container size.

If the ViewBox element has fixed sizing, nothing will change -

Sometimes svg should not change size. In that case give the ViewBox a fixed size, or put it in a fixed size containing element.

If the sizing is relative/variable, it maintains aspect ratio only -

Viewbox scales up the svg contents to match its size. So it could display some icon or chart at the same relative size from phone screen to big monitor. The caveat here is that if you set it up so that the aspect ratio changes, you may get an incomplete portion of the svg showing.