LiveFlow.Components.NodeToolbar (LiveFlow v0.3.2)

Copy Markdown View Source

A toolbar attached to a node (React Flow's <NodeToolbar />).

Render it inside a custom node. It is shown while the node is selected (or when is_visible says so) and positioned outside the node box. Clicks on its buttons don't start a drag.

Examples

def my_node(assigns) do
  ~H"""
  <LiveFlow.Components.NodeToolbar.node_toolbar node={@node} position={:top}>
    <button phx-click="duplicate" phx-value-id={@node.id}>Duplicate</button>
    <button phx-click="delete" phx-value-id={@node.id}>Delete</button>
  </LiveFlow.Components.NodeToolbar.node_toolbar>
  <div>{@node.data.label}</div>
  """
end

Summary

Functions

node_toolbar(assigns)

Renders the toolbar.

Functions

node_toolbar(assigns)

Renders the toolbar.

Attributes

  • :node - The node (required)
  • :is_visible - Force visibility; defaults to node.selected
  • :position - :top, :bottom, :left or :right (default: :top)
  • :align - :start, :center or :end (default: :center)
  • :offset - Gap between node and toolbar in pixels (default: 10)

Attributes

  • node (:map) (required)
  • is_visible (:boolean) - Defaults to nil.
  • position (:atom) - Defaults to :top. Must be one of :top, :bottom, :left, or :right.
  • align (:atom) - Defaults to :center. Must be one of :start, :center, or :end.
  • offset (:integer) - Defaults to 10.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)