Hylograph.Internal.Behavior.FFI

attachZoom_ :: Element -> Number -> Number -> String -> Effect Element

Attach zoom behavior to a DOM element

Parameters:

• element: The DOM element to attach zoom to (typically SVG)
• scaleMin: Minimum zoom scale (e.g., 0.5 for 50%)
• scaleMax: Maximum zoom scale (e.g., 4.0 for 400%)
• targetSelector: CSS selector for the element to transform (e.g., ".zoom-group")

Returns the element for chaining.

attachZoomWithTransform_ :: Element -> Number -> Number -> String -> ZoomTransform -> Effect Element

Attach zoom behavior and restore a previous transform

Like attachZoom_ but also applies the given transform after setup. Use this to preserve zoom state across re-renders.

attachZoomWithCallback_ :: Element -> Number -> Number -> String -> ZoomTransform -> (ZoomTransform -> Effect Unit) -> Effect Element

Attach zoom behavior with callback on zoom events

Like attachZoomWithTransform_ but also calls a callback with the current transform on each zoom event. Use this when you need to update other UI elements (like arrows) that depend on the zoom state.

getZoomTransform_ :: Element -> Effect ZoomTransform

Get the current zoom transform from a DOM element Returns identity transform {k:1, x:0, y:0} if none exists

type ZoomTransform = { k :: Number, x :: Number, y :: Number }

Zoom transform record {k, x, y} for scale and translation

updateAttr_ :: String -> String -> String -> Effect Unit

Update an element's attribute by CSS selector Useful for imperatively updating elements (e.g., arrows during zoom)

attachSimpleDrag_ :: Element -> Unit -> Effect Element

Attach simple drag behavior to a DOM element

Enables dragging with transform translation. Returns the element for chaining.

attachSimulationDrag_ :: Element -> Nullable D3Simulation_ -> String -> Effect Element

Attach simulation-aware drag behavior to a DOM element

Enables dragging with force simulation reheat. When dragging:

• Dragstart: Sets fx/fy fixed positions, reheats simulation
• Drag: Updates fx/fy to follow mouse
• Dragend: Clears fx/fy, cools simulation

Returns the element for chaining.

attachSimulationDragById_ :: Element -> String -> Effect Element

Attach simulation-aware drag using the simulation registry

Looks up the simulation by ID and calls its reheat function on drag start. This enables declarative SimulationDrag in TreeAPI.

When dragging:

• Dragstart: Sets fx/fy, calls registered reheat function
• Drag: Updates fx/fy to follow mouse
• Dragend: Clears fx/fy

attachSimulationDragNestedById_ :: Element -> String -> Effect Element

Attach simulation-aware drag for nested datum structure

Like attachSimulationDragById_, but for datums that have a .node field containing the actual simulation node. Used when the bound datum is a wrapper (like RenderNode) that contains the simulation node.

Sets event.subject.node.fx/fy instead of event.subject.fx/fy

attachClick_ :: Element -> Effect Unit -> Effect Element

Attach click handler without datum access

Attaches a simple click handler that doesn't access the bound datum. Also sets cursor to pointer for clickable elements.

Returns the element for chaining.

attachClickWithDatum_ :: forall datum. Element -> (datum -> Effect Unit) -> Effect Element

Attach click handler with datum access

Attaches a click handler that receives the datum bound to the element. The datum is recovered from D3's data property. Type safety is preserved through the Selection's phantom type. Also sets cursor to pointer for clickable elements.

Returns the element for chaining.

attachMouseEnter_ :: forall datum. Element -> (datum -> Effect Unit) -> Effect Element

Attach mouseenter handler with datum access

Attaches a handler that fires when mouse enters the element. Does not bubble (unlike mouseover). The datum is recovered from D3's data property.

Returns the element for chaining.

attachMouseLeave_ :: forall datum. Element -> (datum -> Effect Unit) -> Effect Element

Attach mouseleave handler with datum access

Attaches a handler that fires when mouse leaves the element. Does not bubble (unlike mouseout). The datum is recovered from D3's data property.

Returns the element for chaining.

attachHighlight_ :: Element -> Array { attr :: String, value :: String } -> Array { attr :: String, value :: String } -> Effect Element

Attach hover highlight behavior

Applies styles on mouseenter and resets on mouseleave. Also raises the element to front on hover.

Parameters:

• element: DOM element to attach to
• enterStyles: Array of {attr, value} to apply on enter
• leaveStyles: Array of {attr, value} to apply on leave

Returns the element for chaining.

attachMouseDown_ :: Element -> Effect Unit -> Effect Element

Attach mousedown handler without datum access

Attaches a handler that fires when mouse button is pressed. Useful for starting drag operations.

attachMouseDownWithEvent_ :: forall datum. Element -> EffectFn2 datum MouseEvent Unit -> Effect Element

Attach mousedown handler with event info (pure web-events version)

Like attachMouseDown_ but provides datum and raw MouseEvent. Use for drag-to-adjust controls where you need the start position.

registerSimulation_ :: String -> Effect Unit -> Effect Unit

Register a simulation with the global registry

This enables SimulationDrag to look up simulations by ID. The reheat function is called when dragging starts.

Usage:

registerSimulation_ "my-viz" (Sim.reheat sim)

unregisterSimulation_ :: String -> Effect Unit

Unregister a simulation from the global registry

Should be called when the visualization is destroyed.

attachMouseMoveWithEvent_ :: forall datum. Element -> EffectFn2 datum MouseEvent Unit -> Effect Element

Attach mousemove handler with event info (pure web-events version)

Uses standard addEventListener instead of D3's .on() Handler receives raw MouseEvent - use Web.UIEvent.MouseEvent accessors

attachMouseEnterWithEvent_ :: forall datum. Element -> EffectFn2 datum MouseEvent Unit -> Effect Element

Attach mouseenter handler with event info (pure web-events version)

attachMouseLeaveWithEvent_ :: forall datum. Element -> EffectFn2 datum MouseEvent Unit -> Effect Element

Attach mouseleave handler with event info (pure web-events version)

attachMouseMoveWithInfo_ :: forall datum. Element -> (datum -> MouseEventInfoJS -> Effect Unit) -> Effect Element

DEPRECATED: Old D3-based versions - keeping for backwards compatibility during transition

attachMouseEnterWithInfo_ :: forall datum. Element -> (datum -> MouseEventInfoJS -> Effect Unit) -> Effect Element

attachMouseLeaveWithInfo_ :: forall datum. Element -> (datum -> MouseEventInfoJS -> Effect Unit) -> Effect Element

type MouseEventInfoJS = { clientX :: Number, clientY :: Number, offsetX :: Number, offsetY :: Number, pageX :: Number, pageY :: Number }

Mouse event info type (matches PureScript MouseEventInfo) DEPRECATED: Will be removed once Operations.purs is updated to use MouseEvent

attachCoordinatedHighlight_ :: forall datum. Element -> (datum -> String) -> (String -> datum -> Int) -> Nullable String -> Nullable (datum -> String) -> Int -> Effect Element

Attach coordinated highlight behavior to an element

Parameters:

• element: DOM element to attach to
• identifyFn: Function to extract identity string from datum
• classifyFn: Function (hoveredId, datum) -> highlightClass (0=Primary, 1=Related, 2=Dimmed, 3=Neutral)
• group: Optional group name (null for global)
• tooltipContentFn: Optional function (datum -> String) for tooltip content
• tooltipTrigger: When to show tooltip (0=OnHover, 1=WhenPrimary, 2=WhenRelated)

The library manages global highlight state. On mouseenter:

1. Gets identity from datum using identifyFn
2. Broadcasts to all registered elements
3. Each element calls classifyFn to determine its highlight class
4. Applies CSS classes (.highlight-primary, .highlight-related, .highlight-dimmed)
5. Shows tooltips based on trigger conditions

Returns element for chaining.

clearAllHighlights_ :: Effect Unit

Clear all highlight classes from all registered elements

Removes .highlight-primary, .highlight-related, .highlight-dimmed from all elements participating in coordinated highlighting. Also hides all tooltips.

scrollToElementById_ :: String -> String -> String -> Effect Unit

Scroll to an element by ID with configurable behavior

Parameters:

• elementId: The ID of the element to scroll to
• behavior: "smooth", "instant", or "auto"
• block: Vertical alignment - "start", "center", "end", or "nearest"

Example:

scrollToElementById_ "my-element" "smooth" "center"

scrollToElement :: String -> Effect Unit

Scroll to an element by ID with smooth animation, centered in view

Convenience wrapper around scrollToElementById_ with sensible defaults.

Example:

scrollToElement "panel-moduleA"