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

Copy Markdown View Source

The stack of styles at one site (spec/14 §18.18).

§3.6 gives every style site a stack — a reference, an inline node, or a list of either. This is the control over it: one row per entry in resolution order, the first applied first and the last winning, because that is the order the cascade is defined in and a panel that reversed it would teach the opposite of the specification.

A row is the control, as a layer row is (§18.17): it carries the click and the drag itself, because a <button> spanning a draggable row defeats both gestures. Each row can be selected, removed, and dragged to a position.

An inline entry is drawn as local: it is where an edit at the site lands, there is at most one, and it is created on first edit rather than sitting empty in every document (D-98).

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

Summary

Types

entry()

One row of the stack: what it is, what to call it, and where it sits.

Functions

choices(design)

The names a style entry may take: what the stacked design declares, and the built-in four (spec/14 §3.3, §18.14).

entries(value, fallback)

A style value as the rows to draw (spec/14 §18.18).

origins(design, value)

Which entry supplied each key of the resolved style (spec/14 §18.19).

panel(assigns)

Renders the stack at a site (spec/10 §15.3).

resolved(design, value)

The site's stack cascaded, as the panel shows it (spec/14 §18.19).

Types

entry()

@type entry() :: %{
  index: non_neg_integer(),
  name: String.t(),
  local: boolean(),
  default: boolean()
}

One row of the stack: what it is, what to call it, and where it sits.

Functions

choices(design)

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

The names a style entry may take: what the stacked design declares, and the built-in four (spec/14 §3.3, §18.14).

iex> Visualize.Chart.Builder.StyleStack.choices(%{styles: %{series: %{}}})
[:axis, :grid, :label, :series, :title]

entries(value, fallback)

@spec entries(term(), atom() | nil) :: [entry()]

A style value as the rows to draw (spec/14 §18.18).

Total over the three shapes of §3.6, and over a site that carries no style key at all: the schema's default for that site is shown as the row it will resolve as, marked default: true so the panel can say it is not something the design states.

iex> Visualize.Chart.Builder.StyleStack.entries(:series, nil)
[%{index: 0, name: "series", local: false, default: false}]

iex> Visualize.Chart.Builder.StyleStack.entries([:series, %{stroke_width: 5}], nil)
[
  %{index: 0, name: "series", local: false, default: false},
  %{index: 1, name: "local", local: true, default: false}
]

iex> Visualize.Chart.Builder.StyleStack.entries(nil, :label)
[%{index: 0, name: "label", local: false, default: true}]

iex> Visualize.Chart.Builder.StyleStack.entries(nil, nil)
[]

origins(design, value)

@spec origins(map(), term()) :: %{required(atom()) => String.t()}

Which entry supplied each key of the resolved style (spec/14 §18.19).

A resolved style is a cascade, so a value belongs to the last entry that set it. This is Visualize.Chart.explain/1's question asked at a site: which style said this.

iex> design = %{styles: %{series: %{stroke: "#111", stroke_width: 2}}}
iex> Visualize.Chart.Builder.StyleStack.origins(design, [:series, %{stroke_width: 5}])
%{stroke: "series", stroke_width: "local"}

panel(assigns)

Renders the stack at a site (spec/10 §15.3).

An <ol class="vis-builder-style-stack"> carrying BuilderHook at scope style, with one <li class="vis-builder-style-entry"> per entry at its zero-based position.

Attributes

  • id (:string) (required) - the hook element's id.
  • value (:any) - the site's style value, in any shape of §3.6. Defaults to nil.
  • fallback (:atom) - the schema's default for this site. Defaults to nil.
  • design (:map) - the stacked design, for the names on offer. Defaults to %{}.
  • open (:integer) - the entry the context panel is on. Defaults to nil.
  • target (:any) - the phx-target of the panel's events. Defaults to nil.
  • class (:string) - appended to the panel's class. Defaults to nil.

resolved(design, value)

@spec resolved(map(), term()) :: map()

The site's stack cascaded, as the panel shows it (spec/14 §18.19).

The design's declared styles over the built-in four, then the entries resolved left to right by §3.6 — which is Visualize.Chart.Style's own rule, asked here for one site.

iex> design = %{styles: %{series: %{stroke_width: 2}}}
iex> Visualize.Chart.Builder.StyleStack.resolved(design, [:series, %{stroke_width: 5}])
%{stroke_width: 5}