Hylograph.Brush

attachBrush :: Element -> BrushConfig -> Effect BrushHandle

Attach a 2D brush to an element

The brush allows users to select a rectangular region by clicking and dragging. Use this for scatterplots, heatmaps, and other 2D visualizations.

The element should typically be a <g> group element within your SVG. The brush will create overlay, selection, and handle elements as children.

Returns a BrushHandle for programmatic control (clear, move, get selection).

attachBrushX :: Element -> BrushConfig -> Effect BrushHandle

Attach a 1D horizontal brush (brushX)

Constrains selection to the x-axis only. Useful for time series or 1D distributions.

attachBrushY :: Element -> BrushConfig -> Effect BrushHandle

Attach a 1D vertical brush (brushY)

Constrains selection to the y-axis only.

clearBrush :: BrushHandle -> Effect Unit

Clear the brush selection programmatically

Removes the visible brush selection without triggering end events.

moveBrush :: BrushHandle -> BrushSelection -> Effect Unit

Move the brush selection programmatically

Sets the brush selection to the given bounds. Pass NoSelection to clear. Useful for syncing brushes across multiple views or setting initial selection.

getBrushSelection :: BrushHandle -> Effect BrushSelection

Get the current brush selection

Returns NoSelection if no brush is active.

data BrushHandle

Opaque handle for controlling a brush programmatically

data BrushSelection

Brush selection - the rectangular region selected by the user

For 2D brush: x0, y0 (top-left) to x1, y1 (bottom-right) For 1D brush: only x0/x1 or y0/y1 are meaningful

Constructors

• Selection2D { x0 :: Number, x1 :: Number, y0 :: Number, y1 :: Number }
• SelectionX { x0 :: Number, x1 :: Number }
• SelectionY { y0 :: Number, y1 :: Number }
• NoSelection

Instances

• Eq BrushSelection
• Show BrushSelection

type BrushExtent = { x0 :: Number, x1 :: Number, y0 :: Number, y1 :: Number }

Extent for brush (defines the brushable area)

type BrushEvent = { selection :: BrushSelection }

Brush event passed to handlers

type BrushConfig = { extent :: BrushExtent, onBrush :: Maybe (BrushEvent -> Effect Unit), onEnd :: Maybe (BrushEvent -> Effect Unit), onStart :: Maybe (BrushEvent -> Effect Unit) }

Configuration for creating a brush

• extent: The brushable area bounds
• onStart: Called when brush gesture starts
• onBrush: Called during brush gesture (as selection changes)
• onEnd: Called when brush gesture ends

selectionWidth :: BrushSelection -> Number

Get the width of a brush selection

selectionHeight :: BrushSelection -> Number

Get the height of a brush selection

isInSelection :: Number -> Number -> BrushSelection -> Boolean

Check if a point is within a 2D brush selection

Returns true if the point (x, y) is inside the selection bounds. Returns false for 1D selections or NoSelection.

defaultBrushConfig :: BrushConfig

Default brush configuration

Extent covers 0,0 to 100,100 with no handlers. Override as needed.