Visualize.Chart.Builder.Layers (Visualize v0.2.35)

Copy Markdown View Source

The builder's stack panel: the layers in precedence order (spec/14 §18.8).

The layers are listed in the order Visualize.Chart.stack/1 reads them — the higher layer last — because that is the order the cascade is defined in, and a panel that reversed it would teach the opposite of the specification. Each layer offers three things: select it, disable it, and drag it into place through Visualize.Hooks.Builder.

The row is the control. Clicking anywhere on it selects the layer and dragging it reorders it, because a row that can only be selected through a 22px icon reads as a row that cannot be selected at all. The one button left is the toggle, and it says draggable="false": a control inside a draggable row is itself a drag source unless it says otherwise, and a mousedown that moves a pixel becomes a drag whose click never fires.

Disabling is not deleting: a disabled layer stays in the list and is dropped from the stack, so "what does this look like without the house theme" is one click and one click back (D-87).

Moving is dragging and nothing else. The panel carried up and down buttons beside every layer, which is two more controls per row to say what one gesture already says, and a stack of any depth is not reordered a step at a time. Visualize.Hooks.Builder is the one way a layer moves (§18.10, §18.17).

This module compiles only when Phoenix.Component is loaded (spec/10 §1.1, D-45, D-85).

Summary

Functions

The kinds a placed fragment declares (spec/14 §18.8), in the schema's order — meta, theme, sources, vars, styles, defs, frame, scales, axes, marks, labels — only those it declares; the details are the inspector's.

Renders the stack panel (spec/10 §15.3).

Functions

declared(fragment)

@spec declared(map()) :: [atom()]

The kinds a placed fragment declares (spec/14 §18.8), in the schema's order — meta, theme, sources, vars, styles, defs, frame, scales, axes, marks, labels — only those it declares; the details are the inspector's.

iex> Visualize.Chart.Builder.Layers.declared(%{styles: %{series: %{stroke: :red}}, frames: %{main: %{scales: %{x: %{kind: :linear}}, axes: [%{scale: :x, side: :bottom}]}}})
[:styles, :scales, :axes]
iex> Visualize.Chart.Builder.Layers.declared(%{})
[]

panel(assigns)

Renders the stack panel (spec/10 §15.3).

An <ol class="vis-builder-layers"> carrying BuilderHook, with one <li class="vis-builder-layer"> per layer at its zero-based position.

Attributes

  • id (:string) (required) - the hook element's id.
  • rows (:list) (required) - the tree's rows by flat position — name, depth, parent, group?, count, open?, kind, id, state, and a referenced group's inside (spec/14 §18.8, #380, #381, #388).
  • hidden (:any) - the positions under a closed group, a MapSet. Defaults to nil.
  • selected (:integer) - the position of the layer being edited. Defaults to 0.
  • chosen (:any) - the positions selected beside the anchor, a MapSet (spec/14 §18.8, #382). Defaults to nil.
  • disabled (:any) - the positions dropped from the stack, a MapSet. Defaults to nil.
  • expanded (:any) - the positions whose rows are open on what the layer declares, a MapSet (§18.8). Defaults to nil.
  • placed (:list) - each layer placed where the design keeps its kind, by position, for declared/1. Defaults to [].
  • masks (:map) - by position, the mask of a layer whose › Mask item is open: %{rows, all?} from Masks.rows/2 (§18.8, #316). Defaults to %{}.
  • target (:any) - the phx-target of the panel's events. Defaults to nil.
  • class (:string) - appended to the panel's class. Defaults to nil.