Module

Hylograph.Interaction.Brush

Package: purescript-hylograph-selection
Repository: afcondon/purescript-hylograph-selection

Native Brush Implementation using Pointer Events

This module provides brush selection behavior without D3 dependency. It integrates with Hylograph.Interaction.Coordinated for brush-and-link patterns.

Basic Usage

import Hylograph.Interaction.Brush (attachNativeBrush, BrushHandle)

-- Attach brush with callbacks
handle <- attachNativeBrush svgElement extent
  { onBrush: \box -> Console.log $ "Brushing: " <> show box
  , onEnd: \maybeBox -> case maybeBox of
      Just box -> Console.log "Selection complete"
      Nothing -> Console.log "Cleared"
  }

Coordinated Usage

For brush-and-link across multiple views:

import Hylograph.Interaction.Brush (attachCoordinatedBrush)
import Hylograph.Interaction.Coordinated (registerCoordinated, withBrush)

-- Register elements in both views
for_ scatterPoints \el ->
  registerCoordinated el (withBrush _.pos (simpleHover _.id))

-- Attach brush to one view - it will emit BrushTrigger to all
brushHandle <- attachCoordinatedBrush svgElement extent (Just "linked-views")

#BrushHandle Source

data BrushHandle

Opaque handle for controlling a brush

#BrushExtent Source

type BrushExtent = BoundingBox

Brush extent (the area where brushing is allowed)

#BrushSelection Source

type BrushSelection = BoundingBox

Current brush selection (same as BoundingBox)

#BrushCallbacks Source

type BrushCallbacks = { onBrush :: BrushSelection -> Effect Unit, onEnd :: Maybe BrushSelection -> Effect Unit }

Callbacks for brush events

#attachNativeBrush Source

attachNativeBrush :: Element -> BrushExtent -> BrushCallbacks -> Effect BrushHandle

Attach a native brush to an SVG element

The brush will:

Draw a selection rectangle when dragging on the SVG background
Call onBrush continuously with the current selection box
Call onEnd with the final selection (or Nothing if cancelled)

The brush only activates when clicking on the SVG background or elements with class brush-background. This allows data elements to receive their own click/drag events.

#attachCoordinatedBrush Source

attachCoordinatedBrush :: Element -> BrushExtent -> Maybe String -> Effect BrushHandle

Attach a brush that integrates with the Coordinated framework

This is the recommended way to use brush for linked views:

Register elements in all views with registerCoordinated
Use withBrush in the config to specify how elements get their position
Attach this brush to the view where brushing should occur

The brush will automatically emit BrushTrigger to all elements in the specified group, causing them to update their coord-selected / coord-dimmed CSS classes.

#clearBrush Source

clearBrush :: BrushHandle -> Effect Unit

Clear the brush selection programmatically

#getBrushSelection Source

getBrushSelection :: BrushHandle -> Effect (Maybe BrushSelection)

Get the current brush selection (if any)

#destroyBrush Source

destroyBrush :: BrushHandle -> Effect Unit

Destroy the brush (remove event listeners and DOM elements)

Call this when the component unmounts.

Modules: Data.DependencyGraph; Hylograph.AST; Hylograph.Axis.Axis; Hylograph.Brush; Hylograph.Brush.FFI; Hylograph.Brush.Types; Hylograph.Classify; Hylograph.Data.Graph; Hylograph.Data.Graph.Algorithms; Hylograph.Data.Node; Hylograph.Data.Tree; Hylograph.Expr.Animation; Hylograph.Expr.Attr; Hylograph.Expr.Datum; Hylograph.Expr.Expr; Hylograph.Expr.Friendly; Hylograph.Expr.Integration; Hylograph.Expr.Interpreter.CodeGen; Hylograph.Expr.Interpreter.Eval; Hylograph.Expr.Interpreter.Meta; Hylograph.Expr.Interpreter.PureSVG; Hylograph.Expr.Interpreter.SVG; Hylograph.Expr.Path; Hylograph.Expr.Path.Generators; Hylograph.Expr.Sugar; Hylograph.Expr.Units; Hylograph.HATS; Hylograph.HATS.Friendly; Hylograph.HATS.InterpreterTick; Hylograph.HATS.Transitions; Hylograph.Interaction.Brush; Hylograph.Interaction.Coordinated; Hylograph.Interaction.Pointer; Hylograph.Interaction.Zoom; Hylograph.Internal.Attribute; Hylograph.Internal.Behavior.FFI; Hylograph.Internal.Behavior.Types; Hylograph.Internal.Capabilities.Selection; Hylograph.Internal.Capabilities.Transition; Hylograph.Internal.FFI; Hylograph.Internal.Selection.Join; Hylograph.Internal.Selection.Operations; Hylograph.Internal.Selection.Operations.Conversions; Hylograph.Internal.Selection.Operations.Helpers; Hylograph.Internal.Selection.Operations.Selection; Hylograph.Internal.Selection.Query; Hylograph.Internal.Selection.Types; Hylograph.Internal.Transition.FFI; Hylograph.Internal.Transition.Manager; Hylograph.Internal.Transition.Scene; Hylograph.Internal.Transition.Types; Hylograph.Internal.Types; Hylograph.Interpreter.D3; Hylograph.Interpreter.English; Hylograph.Interpreter.Mermaid; Hylograph.Interpreter.MetaAST; Hylograph.Interpreter.SemiQuine; Hylograph.Interpreter.SemiQuine.TreeToCode; Hylograph.Interpreter.SemiQuine.Types; Hylograph.Render; Hylograph.Scale; Hylograph.Scale.FP; Hylograph.Shape.Arc; Hylograph.Shape.Pie; Hylograph.Shape.Polygon; Hylograph.Tooltip; Hylograph.Transform; Hylograph.TreeDSL; Hylograph.TreeDSL.ShapeTree; Hylograph.Unified; Hylograph.Unified.Attribute; Hylograph.Unified.DataDSL; Hylograph.Unified.Display; Hylograph.Unified.Examples; Hylograph.Unified.Join; Hylograph.Unified.Sugar