Phoenix LiveView hook for the chart builder's two browser gestures (spec/10 §16).

BuilderHook serves the stack panel and the inspector of Visualize.Chart.Builder (spec/14 §18) and does the two things the browser knows something about and the server does not: where a dragged layer was dropped, and which inspector row was clicked. It moves nothing itself — the server owns the layer list and the next render is the move — and it pushes through pushEventTo when data-builder-target names the component, so the events reach the builder and not its host (D-87).

The hook ships in the bundle whether or not the host has the builder: the JavaScript is a string, and only the builder's Elixir is behind the Phoenix.Component guard.

Usage

<ol id="layers" phx-hook="BuilderHook" data-builder-target={@myself}>
  <li data-builder-layer="0" draggable="true">…</li>
</ol>

Configuration

Data attributes (spec/10 §16.2):

• data-builder-target on the hook element - the phx-target the hook pushes to; absent, it pushes to the LiveView
• data-builder-layer on a stack row - its flat position in the tree, a closed group's rows counted though not drawn; on an inspector row - the position of the layer that set the value
• data-builder-end on a stack row - the flat position past everything the row holds; a drop's gap is read from these two and never counted from the drawn rows (#468)
• data-builder-path on an inspector row - the entry's path, as Visualize.Chart.Validator.format/1 spells one

Events

• reorder with %{"from" => integer, "to" => integer} on a drop between two positions

• select_layer with %{"index" => string, "extend" => "range" | "toggle"} on a Shift- or Ctrl-click on a row, layer_key with "shift" => true on Shift+ArrowUp/Down, and group_sites / ungroup_site with the row on Ctrl+G / Ctrl+Shift+G (spec/14 §18.8, #382)

• insert with %{"name" => string, "at" => integer} on a library entry dropped between rows of the stack, or with "into" => string on one dropped on a container's row — linked, as every drop is (spec/14 §18.17, #381)
• inspect with %{"path" => string, "layer" => string} on a click on a row
• drop_colour with %{"field" => string, "colour" => string, "edit" => string} when a patch of the colour chooser is dropped on a colour well (spec/14 §19.10)
• context_width with %{"width" => integer} when the inspector's edge is released after a drag (spec/14 §18.16)
• pick with %{"node" => string} in scope graph when an element of the chart that carries data-node is clicked (spec/14 §18.16); the hook also outlines the drawn node whose path is the longest prefix of the <svg>'s data-builder-selected
• move with %{"node" => string, "x" => number, "y" => number} when a movable drawn node is dragged with the pointer and released, or with "region" from Shift+Arrow (spec/14 §18.16, spec/10 §16.3)