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_color with %{"field" => string, "color" => string, "edit" => string} when a patch of the color chooser is dropped on a color 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)
• frame_box with %{"frame" => string, "box" => [x, y, w, h]} in scope graph when the open frame is dragged by its body or a corner data-builder-frame-handle, snapped to thirds, halves and the other frames' edges, or nudged by an arrow; a click on a frame's empty space pushes pick with frames.<name> (spec/14 §18.16, #614)
• frame_cell with %{"frame" => string, "cell" => [c, r], "span" => [a, d]} in scope graph when a frame placed by a cell of the layout is dragged between cells, stretched by a corner, or stepped by an arrow (spec/14 §18.16, #617)
• board_place with %{"cell" => string, "x" => integer, "y" => integer, "w" => integer, "h" => integer} in scope board when a cell of the board mode's grid is dragged by its body or resized by a data-board-handle and released somewhere new, or moved and resized from the keyboard; the server places it or refuses it (spec/14 §22.3)